javascript - 使用 JavaScript 动画化 CSS3 转换的值是否排除了硬件加速？

Question

您可以通过设置动画持续时间并设置 CSS3 变换的初始值和最终值来利用硬件加速动画。

如果不设置动画持续时间和使用关键帧，而是直接使用 JavaScript 为所需的 CSS3 转换值设置动画，会怎样？您是否仍会利用硬件加速，或者硬件加速已被排除？

Answer 1

除非您使用转换，否则它不会为 webkit 浏览器进行硬件加速。此外，只有 3d 变换被加速，因此确保元素在可用时使用 3d 渲染树的快速方法是添加:

-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);

顺便说一下，转换速度很快的原因是因为根据定义它们不会影响任何其他元素 - 这意味着浏览器不需要重绘整个窗口，只需重绘正在转换的部分。

旧的动画方式确实应该被认为是过时的，因为它比过渡效率低得多，而且帧率通常较低，尤其是在 iOS 上。