JSFiddle - React, Tailwind, and code Playground
HTML
<div class="q" style="background-image: url(http://s019.radikal.ru/i634/1505/b2/d16775819173.png) ;"></div>
<div class="q" style="background-image: url(http://s009.radikal.ru/i308/1505/9b/8f365d7cddc9.png) ;"></div>
<div class="q" style="background-image: url(http://s020.radikal.ru/i703/1505/93/f4ffe16c7e9c.png) ;"></div>
<div class="w" style="background-image: url(http://s017.radikal.ru/i413/1505/1b/148dd50d2acd.png) ;"></div>
<div id="q" style="background-image: url(http://s017.radikal.ru/i403/1505/e8/c6569e16fea6.jpg) ;" ></div>
CSS
div.q {
top:23px;
width:100px;
height:50px;
background-repeat:no-repeat;
background-size:contain;
position: absolute;
opacity:0;
-webkit-animation: drive 5s .9s ease-in;
-moz-animation: drive 5s .9s ease-in;
}
div.w {
top:105px;
width:100px;
height:50px;
background-repeat:no-repeat;
background-size:contain;
position: absolute;
opacity:0;
-webkit-animation: drive2 5s .9s ease-in;
-moz-animation: drive2 5s .9s ease-in;
}
#q {
width:240px;
height:160px;
}
@keyframes drive {
0% {
left:0px;
}
20% {
opacity:1;
}
80% {
opacity:1;
}
100% {
left:300px;
opacity:0;
}
}
@keyframes drive2 {
0% {
transform:rotate(180deg);
left:300px;
}
20% {
opacity:1;
}
80% {
opacity:1;
}
100% {
transform:rotate(180deg);
left:0px;
opacity:0;
}
}
JavaScript
var a=[
17
'http://javascript.ru/forum/images/smilies/smile.gif',
18
'http://javascript.ru/forum/images/smilies/laugh.gif',
19
'http://javascript.ru/forum/images/smilies/lol.gif',
20
'http://javascript.ru/forum/images/smilies/tongue.gif'
21
]
22
var queue=0
23
$(window).load(function (){
24
setTimeout(Go,500);
25
});
26
function Go() {
2
var o=$('#test td');
var i=Math.floor(Math.random()*o.length);
o=o.get(i);
i='url("'+a[queue]+'")';
$(o).css('background-image',i);
queue++;
queue=queue%a.length;
setTimeout(Go,11500);
};