For animation, the required FMS is sixty "frames" per second to achieve smooth animation behavior.
we cannot handle this much optimum speed with "for loop",
so what we can do is to use:
1) setInterval(function(){ //animate here },10000/60)
or
2) window.requestAnimationFrame( function(){//animate here.})
This approach has some advantage
- The browser can optimize it, so animations will be smoother
- Animations in inactive tabs will stop, allowing the CPU to chill
- More battery-friendly
This was introduced by Paul Irish.
For better understanding follow below urls
http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
https://css-tricks.com/using-requestanimationframe/
