と流暢なし

Question

I 4時間許容可能な性能を持つ単純な遷移を有することに試合を費やし

：

left: 2000px; 
-webkit-transition: left 1s linear; 
-moz-transition: left 1s linear; 
-ms-transition: left 1s linear; 

結果であった：

まず私はこのコードを試みChrome v21.0.1180.89とFireFox v15.0.1ではひどいですが、IE10では素晴らしかったです。 CPU使用量とGPU使用量のグラフを取得しました。クロムは基本的なCSSプロパティにGPUを使用していないことがわかりました。 最新のブラウザのソリューションとは何ですか？その結果、

Answer 1

私の4時間の実験には以下のように変換を使用した方がよい：

 -webkit-transform: translate(2000px, 0); 
     -webkit-transition: -webkit-transform 1s linear; 
     -moz-transform: translate(2000px, 0); 
     -moz-transition: -moz-transform 1s linear; 
     -ms-transform: translate(2000px, 0); 
     -ms-transition: -ms-transform 1s linear; 

これはIE10、クロームv21.0.1180.89とFirefox v15.0.1に素晴らしかったです。

注：IE9はtarnsformsをサポートしていません

Answer 2

は、要素を移動するには、左または上部、下部、余白やパディングプロパティを使用しますが、唯一の「変換：変換」しないでください。

同じように、要素のサイズを変更するには、heightまたはwidthの代わりに "transform：scale"のみを使用します。

左、上、下、余白、パディング、高さ、幅のプロパティ（および他の多くのプロパティ）はブラウザにすべてのレイアウトを再計算させるので、多くのCPUの作業で多くの要素の形状が再計算されます。

各プロパティは、異なる量を有し、この記事では、それは明らかに high performance animations

を説明していますEDIT1：triggers.comあなたは、各プロパティの重み