nAnimation Test

HTML

<script src="https://rawgit.com/imthenachoman/nAnimation/master/nAnimation.1.0.js"></script>
<input type="button" style="width: 100%;" onclick="play()" value="animate all rows">
<br /><br />
    <div class="square"></div>

CSS

.square {
    background: red;
    width: 50px;
    height: 50px;
    position: absolute;
    left: 0;
    top: 50px;
}

JavaScript

function play2() {
  var box = document.querySelector(".square");
  var i = 0;
  while (i < 300) {
    (function (index) {
      setTimeout(function () {
        box.style.left = (index) + 'px';
      }, index * 100);
    })(i);
    i++;
  }
}

var time;
function play() {
  var box = document.querySelector(".square");
  var now = new Date().getTime(),
      dt = now - (time || now);
  time = now;
  window.requestAnimationFrame(play);
  box.style.left = (10 * dt) + 'px';
}