translate3d是始终强制硬件加速还是仅对转换属性强制硬件加速？

Question

因此，假设我有一个页面，在left属性上有一个动画元素。如果我只添加一个零的translateZ，这是否足以在移动设备上强制硬件加速？通过使用translateX而不是left，我会在硬件加速/图形处理器方面获得任何好处吗？

Answer 1

我找到了答案-它只加速了转换属性，而不是左边。下面是要演示的示例小提琴。

left和translateZ的组合-它在移动设备上translateX和translateZ的组合-它的流畅！

Answer 2

首先，我想指出的是，translateZ(0)不是通过图形处理器加速来平滑动画的跨浏览器解决方案，图形处理器加速不应该被随意使用，因为它是相当昂贵的。

也就是说，当它工作时，它不仅仅适用于翻译属性，所以简短的答案是肯定的，它适用于所有属性。

在您的示例中，您可以清楚地看到使用translate而不是left的改进，因为translate不会在每个框架中触发布局(导致页面重新计算元素位置)。请记住，与使用具有GPU加速的昂贵属性相比，使用轻量级属性(如translate )为元素设置动画的性能要高得多。

您可以在css trigger上找到设置动画成本较低的属性。