JSFiddle - React, Tailwind, and code Playground
by Mahendra Maurya
HTML
<div class="hi" id="boy"></div>
CSS
body {
text-align: center;
}
@-webkit-keyframes wink {
from { background-position: 0px; }
to { background-position: -4104px; }
}
@-moz-keyframes wink {
from { background-position: 0px; }
to { background-position: -4104px; }
}
@keyframes wink {
from { background-position: 0px; }
to { background-position: -4104px; }
}
.hi2{left:80px!important;background-image: url("http://worldpoverty.io/imgs/animation/woman_run.png")!important;transform:scale(.5);}
.hi,.hi2 {position:absolute;left:0;
width: 216px;
height: 162px;
background-image: url("http://worldpoverty.io/imgs/animation/man_run.png");
margin: 0 auto;
-webkit-animation: wink .55s steps(19, end) infinite;
-moz-animation: wink .55s steps(19, end) infinite;
animation: wink .55s steps(19, end) infinite;
}​