// crossbrowser animation var requestAnimation = (function() { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback, element) { window.setTimeout(callback, 1000/60); }; })(); // get dom elements var animWrapper = document.getElementById("animWrapper"); var el = document.getElementById("square"); // start animation var startTime = window.mozAnimationStartTime || +new Date; requestAnimation(draw, animWrapper); // drawing function function draw(timestamp) { // time since last draw var drawStart = (timestamp || +new Date); var diff = drawStart - startTime; // update dom elements if the case if (diff > 1000/60) { var left = parseInt((el.style.left || 0), 10) + 5; if (left > 400) {left = 0;} el.style.left = left + "px"; // reset startTime startTime = drawStart; } // draw updated elements on screen requestAnimation(draw, animWrapper); }
<div id="animWrapper"> <div id="square"></div> </div>
#square { position: relative; width: 20px; height: 20px; background: #fc0; }