CSS3动画中的left vs translateX答案

【问题标题】：left vs translateX in CSS3 AnimationsCSS3动画中的left vs translateX
【发布时间】：2012-08-17 22:12:28
【问题描述】：

我创建了this fiddle；红色框使用 CSS left 属性进行动画处理，蓝色框使用 CSS Transform TranslateX 属性进行动画处理。

在 Chrome 21 中，两个动画的性能相同，运行流畅。

但在 Safari（适用于 Windows）中，蓝色的动画流畅，而红色的动画滞后。（好像蓝色的是硬件加速的，红色的不是）

第一个问题是，最好的选择是什么？哪一个整体上更好？（更多浏览器等支持）

接下来，有没有办法在 Safari 中对 left 和 top CSS 属性上的动画进行硬件加速？（由于我想将div 实际移动到窗口外，我认为使用left 属性更好。）

【问题讨论】：

【解决方案1】：

Translate 可以在不影响 DOM 中的位置的情况下移动对象。尽管它明显地移动到屏幕上的另一个位置，但 DOM 不受影响。这就是为什么 translate 函数的性能通常更好的原因。

请注意，您不会在每个浏览器中看到相同的性能特征。

这是对不同translate/move 函数的JSPerf 概述。滚动到底部以查看每个浏览器的统计信息。

未来很可能会发生变化。

【讨论】：

所以，如果我想将某些东西移到窗口外，我应该首先使用TranslateX 对其进行动画处理，然后再将其实际移到外部（使用left 属性），没有动画使用setTimeout。对吗？
@MahdiGhiasi 在 DOM 移出屏幕后你还需要它吗？否则，您可以将其删除。或者将其置于视线之外，并且不要更改 DOM 中的任何内容。
是的，我在离开屏幕后需要它。我正在创建类似旋转木马的东西，它会滑动一些divs。那么，您认为我在之前的评论中所说的方法是最好的方法吗？
@MahdiGhiasi 如果 translate 做你想要的，我不会触及任何其他 css 属性（从性能的角度来看）。您还需要支持旧版浏览器吗？如果是的话，我会开发一些使用 translate 的东西，否则会回退到使用 left 属性。
你链接的工具说css left/top在Safari中也是最快的。但事实并非如此，至少对于 CSS3 动画而言……