var box = document.getElementById('box'), boxPos = 10, boxVelocity = 2, limit = 300, lastFrameTimeMs = 0, maxFPS = 10; function update() { boxPos += boxVelocity; // Switch directions if we go too far if (boxPos >= limit || boxPos <= 0) boxVelocity = -boxVelocity; } function draw() { box.style.left = boxPos + 'px'; } function mainLoop(timestamp) { // Throttle the frame rate. if (timestamp < lastFrameTimeMs + (1000 / maxFPS)) { requestAnimationFrame(mainLoop); return; } lastFrameTimeMs = timestamp; update(); draw(); requestAnimationFrame(mainLoop); } requestAnimationFrame(mainLoop);
<div id="box" style="position: absolute; top: 10px; left: 10px; height: 50px; width: 50px; background-color: red;"></div>