什么时候使用 requestAnimationFrame？ 如果我们有 css 过渡，为什么我们需要 requestAnimationFrame ？

Question

I don't know When to use requestAnimationFrame. If requestAnimationFrame and css both can satisfy my needs, which one should I choose?

can you show me some of your Applied Cases?

thx very much~

Answer 1

I think the only reason to opt for requestAnimationFrame over CSS animations is when you want to do quick animations where you need to ensure that browsers would make it smooth. Animations like jump, stop, pause, return could benefit from using requestAnimationFrame .

The thing is that requestAnimationFrame uses no CPU power, and only draws animation that would be visible to the user (it doesn't consume anything if you swich tabs, minimize, etc). Frames would be only drawn when the browser is ready and since there are no ready frames waiting to be drawn, there are no unnecessary frame draws. So, for smoothness guarantee, you can safely opt for requestAnimationFrame .

If you plan something simple that doesn't fit the above explanation, then requestAnimationFrame is overkill and you'd better switch to CSS animations.

Source consulted:

https://dev.opera.com/articles/better-performance-with-requestanimationframe/