transform:translateX vs transition on left属性.哪个性能更好?CSS

Question

我正在用HTML和CSS3制作一个滑出菜单，尤其是转换。

我想知道水平滑动相对定位的div的最佳实践/最佳性能是什么。当我点击一个按钮时，它会在我的div中添加一个类。哪个类更好？(注意，我可以稍后添加所有浏览器前缀，此网站仅针对现代浏览器)。

//option 1
.animate{
-webkit-transition:all ease 0.3s;
-webkit-transform:translateZ(200px);
}
//option 2
.animate{
-webkit-transition:all ease 0.3s;
left:200px;
}

感谢

Answer 1

通过翻译的转换在移动设备上表现得更好！

编辑：这是一个现场演示。与top、bottom、left和right相比，translateX和translateY的跃迁要平滑得多。jsFiddle移动设备演示

Answer 2

translateX和translateY比左、右、上、下和jQuery动画版本平滑得多。有关演示的更多详细信息，请参见此：

http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/