JSFiddle - React, Tailwind, and code Playground
by António Almeida
HTML
<div class="anim1"></div>
<div class="anim2"></div>
<div class="anim3"></div>
<div class="anim4"></div>
CSS
.anim1, .anim2, .anim3, .anim4 {
display: inline-block;
border: 1px solid #CCC;
margin: 10px;
}
.anim1 {
width: 172px;
height: 100px;
background-image: url('http://i.stack.imgur.com/1XY5D.png');
-webkit-animation: play1 1.5s steps(20) infinite;
-moz-animation: play1 1.5s steps(20) infinite;
-ms-animation: play1 1.5s steps(20) infinite;
-o-animation: play1 1.5s steps(20) infinite;
animation: play1 1.5s steps(20) infinite;
}
.anim2 {
width: 120px;
height: 100px;
background-image: url('http://i.stack.imgur.com/tjvfW.pngs');
-webkit-animation: play2 1.5s steps(15) infinite;
-moz-animation: play2 1.5s steps(15) infinite;
-ms-animation: play2 1.5s steps(15) infinite;
-o-animation: play2 1.5s steps(15) infinite;
animation: play2 1.5s steps(15) infinite;
}.anim3 {
width: 80px;
height: 100px;
background-image: url('http://i.stack.imgur.com/cMyYU.png');
-webkit-animation: play3 1.5s steps(20) infinite;
-moz-animation: play3 1.5s steps(20) infinite;
-ms-animation: play3 1.5s steps(20) infinite;
-o-animation: play3 1.5s steps(20) infinite;
animation: play3 1.5s steps(20) infinite;
}
.anim4 {
width: 120px;
height: 100px;
background-image: url('http://i.stack.imgur.com/4q8j8.png');
-webkit-animation: play4 1.5s steps(20) infinite;
-moz-animation: play4 1.5s steps(20) infinite;
-ms-animation: play4 1.5s steps(20) infinite;
-o-animation: play4 1.5s steps(20) infinite;
animation: play4 1.5s steps(20) infinite;
}
@-webkit-keyframes play1 {
from { background-position: 0 0px }
to { background-position: 0 -2000px }
}
@-moz-keyframes play1 {
from { background-position: 0 0px }
to { background-position: 0 -2000px }
}
@-ms-keyframes play1 {
from { background-position: 0 0px }
to { background-position: 0 -2000px...