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

Question

给定以下动画循环：

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()，实现一种控制动画的方法等等向前。）

Answer 1

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