CSS and JavaScript animation performance

CSS transitions/animations 或者 JavaScript 动画 (使用 requestAnimationFrame()).

各自的使用场景：

• transitions 如button hover Using CSS transitions
• animations  Using CSS animations 

都归类为基于CSS的动画，性能一没什么太大的差距。

requestAnimationFrame()

开发人员可以在requestAnimationFrame回调函数中通过简单地改变元素的样式(或者更新画布绘制，等等)来创建动画。

• 在屏幕上绘制下一帧之前，执行此游戏逻辑/动画处理”的一种方式。浏览器负责选择执行代码的最佳时机，从而更有效地利用资源[3]。

参考文献：hacks.mozilla.org/2011/08/ani…

性能比较

一些基于 JavaScript 的动画库，例如GSAP和Velocity.JS，甚至声称它们能够实现比原生 CSS 过渡/动画更好的性能， 即使这样，我们仍然认为 CSS 动画是更好的选择。关键是只要我们想要动画的属性不触发重排/重绘（阅读CSS 触发器了解更多信息）

我们可以将这些采样操作移出主线程。最常见的属性是 CSS 变换。如果一个元素被提升为一个层，动画变换属性可以在 GPU 中完成，这意味着更好的性能/效率，尤其是在移动设备上。在OffMainThreadCompositing中找到更多细节。

CSS 触发器

background-image