持续时间为零的css转换是否仍然是硬件加速的

Are css transitions with a duration of zero still hardware accelerated?

本文关键字：是否 仍然是 硬件加速 转换 css 持续时间      更新时间：2023-09-26

给定以下动画循环：

var element = document.getElementById('myElement'),
    left = 0;
element.style.transition = 'translate 0s linear';
function loop() {
    left++;
    element.style.transform = 'matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,' + left + ',0,0,1)';
    requestAnimationFrame(loop);
}

动画还会从硬件加速中获利吗，就像纯粹使用css转换一样？此外，环境（浏览器、版本、操作系统）对此有什么影响？

（上面的代码只是想让你知道我在做什么。它不打算在生产中使用。通常我当然会为requestAnimationFrame()做一个后备，实现一种控制动画的方法等等。）

尝试在Chrome中调试它。您可以在"检查器工具"中选择一个标志，以便在正在绘制的对象周围绘制矩形。当一个元素被硬件加速时，它不会显示为绘图区域。元素周围没有红色的矩形表示它是硬件加速的。

相关文章：