JSFiddle - React, Tailwind, and code Playground
HTML
<div id="anim"></div>
<span id="output"></span>
CSS
#anim {
width: 14px;
height: 14px;
background-image: url(http://mail.google.com/mail/im/emotisprites/wink2.png);
background-repeat: no-repeat;
}
JavaScript
var scrollUp = (function () {
var timerId; // stored timer in case you want to use clearInterval later
return function (height, times, element) {
var i = 0; // a simple counter
timerId = setInterval(function () {
document.getElementById('output').innerHTML="frame " + i;
if (i > times) { // if the last frame is reached, set counter to zero
clearInterval(timerId);
document.getElementById('output').innerHTML+=" setInterval cleared! ";
}
element.style.backgroundPosition = "0px -" + i * height + 'px'; //scroll up
i++;
}, 100); // every 100 milliseconds
};
})();
// start animation:
scrollUp(14, 40, document.getElementById('anim'))