JSFiddle - React, Tailwind, and code Playground
HTML
<div class="margin">
<div id="traveler">
<div id="bouncer"> </div>
<div id="bouncer2"> </div>
</div>
</div>
CSS
.margin{
margin-top:200px;
}
}
/* keyframes definition for WebKit browsers */
@-webkit-keyframes travel {
from { right: 10px; }
to { right: 10px; }
}
@-webkit-keyframes bounce {
from, to {
bottom: 40px;
-webkit-animation-timing-function: ease-out;
}
50% {
bottom: 140px;
-webkit-animation-timing-function: ease-in;
}
}
@-webkit-keyframes bounce1 {
from, to {
bottom: 40px;
-webkit-animation-timing-function: ease-out;
}
50% {
bottom: 140px;
z-index:9;
-webkit-animation-timing-function: ease-in;
}
}
/* keyframes definition for other browsers */
@keyframes travel {
from { right: 10px; }
to { right: 10px; }
}
@keyframes bounce {
from, to {
bottom: 45px;
animation-timing-function: ease-out;
}
50% {
bottom: 140px;
animation-timing-function: ease-in;
}
}
@keyframes bounce1 {
from, to {
bottom: 45px;
animation-timing-function: ease-out;
}
50% {
bottom: 140px;
z-index:9;
animation-timing-function: ease-in;
}
}
/* styles for the stage and animated elements */
#traveler {
position: absolute;
width: 75px;
height: 100px;
-webkit-animation-name: travel;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-duration:1.8s;
animation-name: travel;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-duration: 1.8s;
}
#bouncer {
position: absolute;
width: 75px;
z-index:10;
height: 100px;
border-radius: 10px;
/*background: url(../img/jump.png) no-repeat;*/
background:green;
-webkit-animation-name: bounce;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 1.2s;
animation-name: bounce;
animation-iteration-count: infinite;
animation-duration: 1.2s;
}
#bouncer2 {
position: absolute;
z-index:11;
width: 75px;
...