转换：translateX 与左侧属性上的转换。哪个性能更好？CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13410723/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
transform:translateX vs transition on left property. Which has better performance? CSS
提问by HymanMahoney
I'm making a slide out menu with HTML and CSS3 - especially transitions.
我正在制作一个带有 HTML 和 CSS3 的滑出式菜单——尤其是过渡。
I would like to know what is best practice / best performance to slide a relatively positioned div horizontally. When i click a button it adds a class to my div. Which class is better? (Note I can add all the browser prefixes later and this site only targets modern browsers).
我想知道什么是水平滑动相对定位的 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;
}
Thanks
谢谢
采纳答案by Philipp Kühn
Transitions via translate performs MUCH better on mobile devices!
通过翻译转换在移动设备上的表现要好得多！
Edit:
Here are a live demo. Transitions with translateXand translateYare much smoother than top, bottom, leftand right.
jsFiddle Demo for mobile devices
编辑：这是一个现场演示。与过渡translateX，并translateY比更平滑top，bottom，left和right。
用于移动设备的 jsFiddle 演示
回答by Yogesh Yadav
translateX and translateY is much smoother than left, right, top, bottom and jQuery animate versions. See this for much deeper details with demo:
translateX 和 translateY 比左、右、上、下和 jQuery 动画版本要平滑得多。通过演示查看更深入的细节：
http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
