<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.