JSFiddle - React, Tailwind, and code Playground

by Ариан Шапиро

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;
}
}