JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">   
    <div class="hi">
    </div>
</div>

CSS

.hi {
    width: 389px;
    height: 238px;
    background-image: url("http://i.imgur.com/XOmx2Mm.png");
    position: relative;
    border: solid 1px black;
    -webkit-animation: playv 2s steps(6) infinite, playh 2s steps(10) infinite; 
}

#container {
    
}

/* .hi:before {
    content: "";
    position: absolute;
    width: 176px;
    height: 108px;
    left: 0px;
    top: 0px;
    border: solid 1px red;
    -webkit-animation: playv 18s steps(6) infinite, playh 3s steps(9) infinite; 
}  */

@-webkit-keyframes playv {
     0% {  background-position-y:   0px; }
   100% {  background-position-y: -1429px; }
}

@-webkit-keyframes playh {
     0% {  background-position-x:   0px; }
   100% {  background-position-x: -3500px; }
}