<div id="mydiv"></div>
#mydiv {
	height: 50px;
	width: 50px;
	background: red;
}
View Compiled
function animate(el, time, distance) {
  let startTime = null;

  const speed = distance / time;

  const move = (currentTime) => {
    if (!startTime) startTime = currentTime;

    const elapsedTime = currentTime - startTime;

    if (elapsedTime > time) return;

    el.style.transform = `translateX(${elapsedTime * speed}px)`;
    window.requestAnimationFrame(move);
  };

  window.requestAnimationFrame(move);
}

animate(document.getElementById("mydiv"), 2000, 100);
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.