JSFiddle - React, Tailwind, and code Playground
CSS
div {
width : 40px;
height : 40px;
border : 5px solid red;
position : absolute;
top : 0;
left : 0;
}
JavaScript
setTimeout(function () {
var delay = 100, //delay between animations
distance = 25, //total distance moved
sync = false; //should this use blocking code
if (sync) {
var i = 0,
elapsed = 0,
last = new Date();
while (i < distance) {
var now = new Date();
elapsed += (now - last);
last = now;
if (elapsed >= delay) {
move(i++);
elapsed -= delay;
}
}
} else {
for (var i = 0; i < distance; i++) {
assyncMove(i, delay * i);
}
}
function assyncMove(position, delay) {
setTimeout(function () {
move(position);
}, delay);
}
function move(position) {
$("div").css("left", position);
}
}, 1000);