dönüşümü: translateX vs soldaki özellik üzerinde geçiş. Hangisi daha iyi performansa sahip? CSS

Question

HTML ve CSS3 içeren bir slayt menüsü oluşturuyorum - özellikle geçişler.

Göreceli olarak konumlandırılmış bir bölümü yatay olarak kaydırmak için en iyi uygulama/en iyi performansın ne olduğunu bilmek isterim. Bir düğmeyi tıkladığımda div'uma bir sınıf ekler. Hangi sınıf daha iyi? (Tüm tarayıcı öneklerini daha sonra ekleyebilirim ve bu site sadece modern tarayıcıları hedefleyebilir).

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

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

Teşekkür

Answer 1

Geçişler aracılığıyla çok daha iyi mobil cihazlarda gösterdiği performansı çevirmek!

Düzeltme: İşte bir demo canlı. translateX ve translateY ile geçişler, top, bottom, left ve right'dan çok daha pürüzsüzdür. jsFiddle Demo for mobile devices

Answer 2

translateX ve çeviriYolu sol, sağ, üst, alt ve jQuery animasyonlu sürümlerinden çok daha yumuşaktır. demo ile çok daha derin bilgi için bu bakınız:

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