CSS:is transition:左/顶部GPU加速



我知道,通过对"transform"属性应用转换,可以强制GPU加速以实现屏幕上元素的平滑动画,例如:

elem.style.transition = 'all 3s ease-out';
elem.style.transform = 'translateX(600px)';

但我想知道如果你用代替第二行会发生什么

elem.style.left = '600px'; 

GPU加速是否会在"左"(或"上")属性中起作用,或者它必须在变换属性上?在我看来,它应该是GPU加速功能,但我无法从我阅读的任何文档中找到最终答案。

它没有加速。你必须使用特定的CSS3属性才能使其加速。我想你会发现这些链接很有趣:

http://www.html5rocks.com/en/tutorials/speed/html5/

http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome

用javascript设置CSS3转换值的动画是否排除了硬件加速?

我收集到的共识是,只有translate3d属性在移动设备(如mobile Safari)上是硬件加速的。

进一步阅读。

相关内容

  • 没有找到相关文章