トランスフォーム：translateXと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

トランジションを経由してはるかに優れたモバイルデバイス上で実行するを翻訳！

編集： ここにライブデモがあります。 translateXおよびtranslateYの遷移は、top,bottom,leftおよびrightよりはるかに滑らかです。 jsFiddle Demo for mobile devices

Answer 2

translateXとtranslateYは、左、右、上、下、およびjQueryのアニメーションバージョンよりはるかに滑らかです。 デモとのより深い詳細については、これを参照してください。

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