SOURCE

var intervalId=null;

  document.getElementById('redbox').addEventListener('click',startBox,false);

  function startBox() {
    if (intervalId == null) {
       var x = 100;
       intervalId=setInterval(
            function() {
              x+=5;
              var left = x + "px";
              document.getElementById("redbox").style.left=left;
            },1000/60);
    } else {
       clearInterval(intervalId);
       intervalId=null;
    }
  }
  function animate() {
    var xx = 100;
    if (raf == null) {
      start();
    } else {
      cancelAnimationFrame(raf);
      raf = null;
    }
    function draw() {
      xx += 5;
      var left = xx + 'px';
      document.getElementById("redbox2").style.left = left;
    }
    function start () {
      raf = requestAnimationFrame(start);
      draw();
    }
  }
  var raf
  document.getElementById('redbox').addEventListener('click',animate,false);

<div id="redbox"></div>
<div id="redbox2"></div>

#redbox
{
  position: absolute;
  left: 100px;
  top: 100px;
  width: 200px; height: 200px;
  background-color: red;
}
#redbox2
{
  position: absolute;
  left: 100px;
  top: 400px;
  width: 200px; height: 200px;
  background-color: red;
}