requestAnimationFrame01

by catfood

HTML

<div id="box"></div>

CSS

#box{
    background:red;
    width:100px;
    height:100px;
    position:relative;
}

JavaScript

window.requestAnimationFrame = window.requestAnimationFrame ||
  window.mozRequestAnimationFrame ||
  window.webkitRequestAnimationFrame ||
  window.msRequestAnimationFrame;

var i=0,box = document.getElementById("box");
function step() {
  i+=10;
  box.style.left = i + "px";
  if (i < 200) {
    requestAnimationFrame(step);
  }
}
requestAnimationFrame(step);