JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
    <div class="inner">
        <img src="http://lorgame.ru/test.png" id="img">
    </div>
</div>

CSS

body {
    background-color: #000000;
}
.outer {
    position: absolute;
    left: 49.99999%;
    margin-left: -50px;
}
.inner {
    position: absolute;
    width: 100px;
    height: 2000px;
    overflow: hidden;
}
.inner img {
    position: absolute;
    top: 0;
    left: 0;
}

JavaScript

var frames = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1];
var curframe = 0, framecount = frames.length;
var img = document.getElementById('img');
var interval = setInterval(function() {
    curframe++;
    if (curframe == framecount) curframe = 0;
    img.style.left = '-' + (frames[curframe] * 100) + 'px';
}, 100);