我已经创建了这个小提琴；红色框使用CSS left属性设置动画，蓝色框使用CSS Transform TranslateX属性设置动画。
在Chrome21中，两个动画都具有相同的性能，运行都很流畅。
但在Safari（适用于Windows）中，蓝色的动画效果很好，但红色的动画效果较差。（看起来蓝色的是硬件加速的，而红色的不是）
第一个问题是，什么是最好的选择？哪一个整体更擅长？（支持更多浏览器等）
接下来，是否有任何方法可以在Safari中硬件加速left和top CSS属性上的动画？（因为我想实际将div移动到窗口外，所以我认为使用left属性更好。）
Translate可以在不影响DOM中位置的情况下移动对象。尽管它明显地移动到屏幕上的另一个位置，但DOM并没有受到影响。这就是为什么translate函数的性能通常更好的原因。
请注意，您不会在每个浏览器中看到相同的性能特征。
这是JSPerf对不同翻译/移动函数的概述。滚动到底部查看每个浏览器的统计信息。
它很可能在未来发生变化。