CodePen

HTML

            
              <button id="start">start</button>
<button id="stop">stop</button>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              div {
  width: 10px;
  height: 10px;
  background: orange;
  float: left;
}

button {
  position: absolute;
  top: 20px;
  left: 20px;
}
#stop {
  left: 100px;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              /*
Simplest Possible Way:

function repeatOften() {
  $("<div />").appendTo("body");
  requestAnimationFrame(repeatOften);
}
requestAnimationFrame(repeatOften);
*/

/*
Polyfill: http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
*/

var globalID;

function repeatOften() {
  $("<div />").appendTo("body");
  globalID = requestAnimationFrame(repeatOften);
}

$("#start").on("click", function() {
  globalID = requestAnimationFrame(repeatOften);
});

$("#stop").on("click", function() {
  cancelAnimationFrame(globalID);
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................