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

时间:2013-08-30 12:14:36

标签: javascript css css3 css-transitions hardware-acceleration

给出以下动画循环:

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()做一个后备,实现一种控制动画等的方法。)

1 个答案:

答案 0 :(得分:0)

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