translate3d vs翻译表现

时间:2014-03-01 06:59:16

标签: performance css-transforms

我们现在都知道,尤其是来自that nice article,我们应该更喜欢使用css-transforms来制作动画位置。

但我们可以选择translate()translate3d() ...

哪一个通常更快?

3 个答案:

答案 0 :(得分:43)

以下网站会运行比较translate()translate3d()和其他几个属性的测试。根据它,translate3d()在大多数浏览器中都更快。

http://jsperf.com/translate3d-vs-xy

答案 1 :(得分:29)

使用translate3d将CSS动画推送到硬件加速。即使您正在寻找基本的2d翻译,也可以使用translate3d获得更多功能!所以' T3d'只是更好,因为它告诉CSS动画以3d动力推动动画! 这就是它更快的原因。 (Cameron Little的答案就是证明)

答案 2 :(得分:16)

正如Cameron所说,translate3d在许多浏览器中应该更快,大多数使用gfx硬件加速来加速渲染。特别是在webkit上translate3d是在页面项上强制硬件加速的首选方式。

虽然在mit体验中有时使用3d变换有一个缺点 - 在某些浏览器版本/ os组合中(osx + safari我正在看着你)硬件加速渲染可以稍微改变字体平滑以及插值因此导致轻微的闪烁或模糊。这些情况大多可以解决,但应该牢记在心。