JSFiddle - React, Tailwind, and code Playground
HTML
<div id="wall">
<div id="sprite"></div>
</div>
CSS
#wall {
width: 300px;
height: 171px;
position: relative;
margin: 100px auto;
background: url(http://rootdroid.zz.mu/images/wall.png);
}
#sprite {
width: 170px;
height: 171px;
position: absolute;
left: 298px;
background-image: url(http://rootdroid.zz.mu/images/sprite.jpg);
border-left: 2px solid #7d5645;
-webkit-animation: gangham 10s steps(196,start) infinite;
}
@-webkit-keyframes gangham {
0% {background-position: 0 0}
100% {background-position: -39309px 0}
}
@keyframes gangham {
0% {background-position: 0 0}
100% {background-position: -39309px 0}
}