transform: translateX vs transition on left property. Quale ha prestazioni migliori? CSS

Question

Sto facendo un menu a tendina con HTML e CSS3 - specialmente le transizioni.

Mi piacerebbe sapere qual è la migliore pratica/la migliore prestazione per far scorrere una div in posizione relativamente orizzontale. Quando clicco su un pulsante, aggiunge una classe al mio div. Quale classe è migliore? (Nota: posso aggiungere tutti i prefissi del browser più tardi e questo sito si rivolge solo ai browser moderni).

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

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

Grazie

Answer 1

transizioni tramite tradurre rende molto di più su dispositivi mobili!

Modifica: Ecco una demo dal vivo. Le transizioni con translateX e translateY sono molto più uniformi rispetto a top, bottom, left e right. jsFiddle Demo for mobile devices

Answer 2

translateX e translateY è molto più agevole delle versioni sinistra, destra, superiore, inferiore e jQuery animate. Vedere questo per molto più profondi dettagli con demo:

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