JSFiddle - React, Tailwind, and code Playground
HTML
<div><img src="http://img13.deviantart.net/7fc3/i/2012/288/4/7/volt_sprite_sheet_by_kwelfury-d5hx008.png" alt="">
</div>
CSS
div {
width: 180px;
height: 247.5px;
/*overflow: hidden;*/
border: 1px solid black;
}
img {
margin-top: 0px;
margin-left: 0px;
transition: margin-top .4s, margin-left .4s;
}
JavaScript
var img = document.querySelector('img');
var pos = 0;
var largura = 180;
var altura = 247.5;
function prox() {
pos++;
console.log(pos);
if (pos == 10) pos = 0;
var linha = Math.floor(pos / 5) * altura;
var coluna = pos % 5 * largura ;
img.style.marginTop = -linha + 'px';
img.style.marginLeft = -coluna + 'px';
}
setInterval(prox, 500);