transform: translateX vs Übergang auf der linken Eigenschaft. Welche hat bessere Leistung? CSS

Question

Ich mache ein Slide-Out-Menü mit HTML und CSS3 - insbesondere Übergänge.

Ich würde gerne wissen, was Best Practice/beste Leistung ist, um ein relativ positioniertes div horizontal zu verschieben. Wenn ich auf eine Schaltfläche klicke, fügt sie meiner Klasse eine Klasse hinzu. Welche Klasse ist besser? (Hinweis: Ich kann später alle Browserpräfixe hinzufügen, und diese Website ist nur für moderne Browser geeignet).

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

//option 2 
.animate{ 
    -webkit-transition:all ease 0.3s; 
    left:200px; 
} 

Dank

Answer 1

Transitions über übersetzen führt viel besser auf mobile Geräte!

Edit: Hier sind eine Live-Demo. Übergänge mit translateX und translateY sind viel glatter als top, bottom, left und right.

Answer 2

translateX und translateY ist viel glatter als links, rechts, oben, unten und jQuery animierte Versionen. Sehen Sie diese für viel tiefere Details mit Demo:

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