Вот пример который использовал бы я.
function bindFrameAnimation() {
var requstAnimation = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame,
el = document.getElementById("shape"),
start = new Date().getTime();
function animate() {
var progress = new Date().getTime() - start,
leftPos = (el.style.left) ? el.style.left.replace("px", "") : 0;
el.style.left = ++leftPos + "px";
if(progress < 10000) {
requstAnimation(animate);
}
}
requstAnimation(animate);
}
window.onload = bindFrameAnimation;
<div id="shape" style="width:250px;height:250px;">
Пример не всей анимации, а лишь для того чтобы на основе этого создать анимацию.
Не особо важное примечание: работает только в нормальных браузерах.