なぜ交換するJS、CSSアニメーションアニメーション

JavaScriptの効率の低さには二つの理由：DOM操作と使用ページのアニメーション。

通常、我々はDOM、CSSを操作頻繁を通じてアニメーション視覚効果を実現するために来る、二つの要因は、低効率のjsが頻出操作DOMやCSSに含まれているにつながる、ブラウザが実行して再配置を停止することはありませんブラウザ使用可能なメモリは、ユーザーが再描画し、ページ生成されたアニメーションをリフロー肉眼ではほとんど見えない、比較的大きいため、事実上、パフォーマンス上の問題があまりにも多くのアニメーション考慮によって引き起こさエンジニアので、ブラウザのPC版を再描画しますが、中モバイルデバイス上では非常に異なることができ、モバイルデバイスは、内蔵ブラウザメモリに割り当てられているブラウザ、かなりのメモリのPC版を持つことができない、CSS3のサポートは現在、WebKitのブラウザへの最善の方法、およびブラウザのWebKitのコア、1ですサファリは、クロムが続きます。

CSS3アニメーションで代替アナログアニメーションのJSの利点：

JSは、メインスレッドを占有しません。
ハードウェアアクセラレーションを利用してもよいです。
ブラウザは、アニメーションを最適化するために行うことができる（FPSへの影響を低減しないときにアニメーション要素が表示されていません）

CSS3アニメーションは、2Dと3Dアニメーション特性ならびに従来のインターフェイスを提供する、それは財産の任意の要素の任意のページ上で動作することができ、CSS3アニメーションC言語を使用して、それがシステムレベルのアニメーションです。

JS CSS3アニメーションやアニメーションを使用して、開発者はさまざまなニーズに基づいて、異なる選択をする必要がありますが、基本的な原則に従ってくださいです：あなたは、2Dアニメーションを実行する必要がある場合には、必ずしもトランジションやアニメーションCSS3を使用していません

次のような違いとCSS3アニメーションやシミュレーションのJavaScriptアニメーション：

CSS 3Dアニメーションjsが達成できない
ことは、三次元空間で動作するため、CSS3 CSS3 3Dアニメーションは、非常に強力な機能であるため、CSS3 3Dアニメーションなどのようなjsファイルをシミュレートすることはできません
CSS、JS利用マージンとシミュレーションアニメーション左、上マトリックスより効率的な行列2Dアニメーション
、2DアニメーションのCSS3手段が2Dは、行列の変更をトランスフォームされ、JSもちろん、アニメーションを変形させないでください。アニメーションの座標を取り、CSS3アニメーションの使用は、左の位置にあるJSよりも位置右速いほぼ700ミリメートルをtranslateXYを行うに変換！とJSのアニメーションよりも視覚的にたくさんスムーズに。
他の従来の効率CSS3アニメーションプロパティは、シミュレートされたJSアニメーションよりも低かった
高さ、幅、不透明度、境界：ここ意味従来のアニメーションプロパティ -width、色

CSS3プロパティ

2D変換
CSS3変換素子は、移動スケール、回転、細長い又は延伸させてもよいです。
変換素子の2Dまたは3Dに適した特性を、変換
変換原点属性セット変換素子の位置

1.translate（）メソッドは、左（X軸）と上面（Y軸）所与のパラメータの位置、現在の位置からの要素から。　

DIV { 
　　変換：変換（は50px、100pxに） ; 
　　-webkit-変換：変換（は50px、100pxに） ; / * Safariとクローム* / 
}

2.rotate（）メソッドは、要素の時計回りの回転度の所定数。回転要素が反時計回りになるように負の値は、許可されています。

DIV { 
　　変換：（30度）回転します。
　　-webkit-変換：回転（30度）。/ * Safariとクローム* / 
}

3.scale（）メソッドは、幅（X軸方向）及び高さ（Y軸）のパラメータに応じて、大きさを増減する要素

DIV { 
    -webkit-変換：スケール（2,3） 。/ * サファリ/
    変換：スケール（2,3）/標準構文* / 
}

4.skew（[、]）、それぞれ、X軸とY軸の傾斜角を2つのパラメータ値を含み、2番目のパラメータがnullの場合、それは0にデフォルト設定されます、パラメータは逆方向に負の傾きを示しています。

DIV { 
    変換：スキュー（30度、20deg）を、
    -ms-変換：スキュー（30度、20deg） 。/ * IE 9 /
    -webkit-変換：スキュー（30度、20deg）。/ Safariとクローム* / 
}

3D変換

translate3d（X、Y、Z）は、3D変換を定義します。
移動X（x）は、3D変換、X軸の値のみを定義しました。
移動Y（Y）は、Y軸の値のみを3D変換を定義します。
translateZ（z）は、Z軸の値のみを3D変換を定義しました。

scale3d（x、y、z）は、3Dスケール変換が定義されています。
scaleXプロパティ（X）は、X軸の値によって与えられる、3Dスケーリング変換を定義します。
scaleYの（Y）Y軸の値によって与えられる、3Dスケーリング変換を定義します。
scaleZ（z）は、Z軸の値によって与えられる変換を、スケーリング3D定義しました。

rotate3dは（X、Y、Z、角度）3D回転を定義します。
3D回転X回転（角度）は、X軸に沿って定義されています。
3D回転回転Y（角度）は、Y軸に沿って定義されています。
3D回転回転Z（角度）は、Z軸に沿って定義されています。

視点（n）は、変換素子の3D斜視図を定義します。

CSS3トランジション

4つの遷移特性のプロパティを設定するために使用される短縮形プロパティを移行。
トランジションの適用のCSSプロパティ名の遷移財産条項。
遷移時間は、それが効果を移行するのにかかる時間を定義します。デフォルトは0です。遷移期間：5S。
所定の時間プロファイルトランジション効果の遷移タイミング機能。デフォルトでは「楽」です。
    線形（立方ベジェ（0,0,1,1）に等しい）同じ速度でトランジションエフェクトの終わりに開始し、所定。
    次いで速い、所定のスロースタートを容易にし、低速トランジション効果（立方ベジェ（0.25,0.1,0.25,1））の終わり。
    使いやすさに影響（）0.42,0,1,1（立方ベジェ相当）所定の開始への移行を遅らせます。
    容易アウト所定のトランジションエフェクトの端を遅くする（同等の立方ベジェ（0,0,0.58,1））。
    緩和・イン・アウト（立方ベジェ（0.42,0,0.58,1）に等しい）遅い開始と終了の規定にトランジション効果を。
    立方ベジェ（N、N、N、N）の値は、それらの立方ベジェ関数を定義します。可能な値は0と1の間の値です。
トランジション効果を開始するときに遷移遅延を定義します。デフォルトは0です。遷移遅延：2S。

CSS3 动画

規定のアニメーションを@keyframes。    
すべてのアニメーション速記プロパティのアニメーションプロパティ、アニメーションプレイ状態のプロパティに加えてインチ    
名前はアニメーションアニメーション名のルールを@keyframes。    
アニメーション持続時間秒またはミリ秒のアニメーションの完了を所定の一の周期を取ります。デフォルトは0です。    
速度プロファイルを所定のアニメーションタイミング機能アニメーション。デフォルトでは「楽」です。    
スタイル要素に適用されるように、（アニメーションが完了したとき、またはアニメーションが再生を開始しない遅延がある）、ムービーが再生されていないときに指定したアニメーションフィルモード。    
アニメーションの起動時にアニメーション-遅延が指定します。デフォルトは0です。    
回数は、アニメーションは、アニメーションの繰り返し数の要件を果たしています。デフォルトは1です。
アニメーション方向は、アニメーションが次のサイクルに逆に再生するかどうかを指定します。デフォルトでは、「正常」です。
アニメーションプレイ状態は、アニメーションが実行中または一時停止しているかどうかを指定します。デフォルトでは「実行中」されます。

実装に変換、CSS3のトランジションやアニメーションに共通

なぜ交換するJS、CSSアニメーションアニメーション

CSS3プロパティ

おすすめ