I tried different ways to make constant animations using JavaScript and HTML. The problem is that they are never perfect.

If I want to move a square exactly 5 pixels every 50 miliseconds I would use that code:

var leftPosition = 0;

function move() {
    leftPosition += 5;
    document.getElementById("square").style.left = leftPosition + "px";
}

window.onload = function() {
    setInterval(move, 50);
};

What I mean by not perfect is that the square will sometimes move slightly faster or slower during it's course. To notice that you have to really pay attention to the moving animation.

I already tried to using requestAnimationFrame but happened the same thing. Is there a way to improve it?

I tried different ways to make constant animations using JavaScript and HTML. The problem is that they are never perfect.

If I want to move a square exactly 5 pixels every 50 miliseconds I would use that code:

var leftPosition = 0;

function move() {
    leftPosition += 5;
    document.getElementById("square").style.left = leftPosition + "px";
}

window.onload = function() {
    setInterval(move, 50);
};

What I mean by not perfect is that the square will sometimes move slightly faster or slower during it's course. To notice that you have to really pay attention to the moving animation.

I already tried to using requestAnimationFrame but happened the same thing. Is there a way to improve it?