requestAnimationFrame for begining a CSS transition
animation, html, javascript, requestanimationframe
Solution
I know question is old, but this may be useful for somebody.
rAF(requestAnimationFrame) is useless in this example. Because you are sliding element with css transition and calling rAF once. You have to loop prop changes with calling rAF frame by frame for optimize CPU,GPU performance by browser.
Main idea about rAF:
When you want to animate dom elements without css animations, you have to change elements' style properties (like width, height, top, left etc.) periodically.
Without rAF, you have to use setTimeout, setInterval functions to change props according to time. But browsers don't optimize these processes and it can be painful for CPU,GPU performance.
When you use rAF, modern browsers can optimize animation performance with less CPU, GPU usage.
Useful Links:
requestAnimationFrame for Smart Animating
requestAnimationFrame
Problem
Does it make sense to request an animation frame for beginning a CSS transition? For example, the Mozilla CSS transitions page includes a link to this jsfiddle example: CSS: ``` #foo{ border-radius:50px; width:50px; height:50px; background:#c00; position:absolute; top:0; left:0; -moz-transition: all 1s; -webkit-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s; } ``` JavaScript: ``` var f = document.getElementById('foo'); document.addEventListener('click', function(ev){ f.style.left = (ev.clientX-25)+'px'; f.style.top = (ev.clientY-25)+'px'; },false); ``` Does rewriting this example as follows make any sense? (See this jsfiddle) JavaScript: ``` var rAF = window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame; var f = document.getElementById('foo'); document.addEventListener('click', function(ev){ rAF(function() { f.style.left = (ev.clientX-25)+'px'; f.style.top = (ev.clientY-25)+'px'; }); },false); ``` Thanks for any answer.