、JSアニメーション（のsetIntervalのsetTimeout requestAnimationFrameの）
長所：
1）プロセス制御能力。それは正確に終了ができ、開始、中止、中断、アニメーションプロジェクトを制御することができます。
2）アニメーションや、より涼しいです。いくつかの効果は、CSSアニメーションでは実現できません
3）高い互換性
短所：
1）JSのアニメーション効果は、ブラウザのメモリを消費し、）一定の再配置（リフロー）を必要とし、再ペイント（再描画DOMやCSSのプロパティの連続運転によって達成されているので。ブラウザで（PC側
、比較的大きなメモリを割り当てるアニメーション転位（リフロー）と（再描画）を再描画も）無視できる程度であるが、その効果は、携帯端末で非常に明白です
メインスレッド2）JSアニメーション実行、メインスレッドので、そのようなJavaScriptが実行される必要があるような他のスクリプトがあり、メインスレッドの干渉は、フレーム損失の問題を引き起こすことができます。
3）さらに複雑なCSSアニメーション
4）JSアニメーション非同期処理リードタイムアニメーションが実行を正確に制御することができない始めると
二、CSSアニメーション（遷移アニメーション変換）
長所：
1）ブラウザを最適化することができます
理由：ブラウザがのsetTimeoutの利点に比べより同様の機構requestAnimationFrameのを使用したsetIntervalは、アニメーション化され
*すべてのDOM操作は一緒に、または中requestAnimationFrameのは、完全な逆流を再描画します。そして、ブラウザのリフレッシュレートと同じ
*隠しや目に見えない要素requestAnimationFrameのは、再描画されることはありませんか、逆流、それはより少ないCPUのGPUとメモリ使用量を使用します。
最適化された前提条件：
に基づいて*クロムブラウザ
* CSSアニメーションは、レイアウトや塗料誘発しない（JSでトリガレイアウトと塗料とCSSアニメーション、メインスレッドのレイヤツリーを再計算する必要があり、その後、JS CSSアニメーションは、その後の動作をブロックします）
次の属性のみの複合トリガー行うことができます変更、レイアウトや塗料を誘発しません
- 背面視認性
- 不透明度
- 展望
- 透視起源
- transfrom
2）プロパティのいくつかは、加速度および3DアクセラレーションハードウェアのGPUを（GPUによってアニメーション性能を改善するために）開始することができる、例えば、変換translateZ 3D変換すること
3）コードは、単純な、簡単なチューニングです。
4）ブラウザの低フレームレートのバージョンのパフォーマンスの低下のために、CSS3は自然にダウングレードするかすることができますが、余分なコードJSを作成する必要があります
短所：
1）アニメーションプロジェクトが制御することはできません、特定の状況でのみキャンセル一時停止することができ、あなたはコールバック関数を追加することはできません。
2）互換性が良くありません
第三に、パフォーマンスの問題
1、2Dは、そのようなスケーリングの\ \ yを変更\のX軸の軸としてマトリックスの変化、（もちろんのJS修飾を変換された行列アニメーションマージンと左、トップアナログ（2DアニメーションのCSS3手段を使用して、JSマトリックスより効率的なCSS 2Dアニメーション、ありませんアニメーション））
例えば、左の位置にあるJSよりもtranslateXYをCSS3アニメーションをん変換を使用して、位置右速いほぼ700ミリメートル！しかし、また、より多くの流体
図2は、他の従来の効率CSS3アニメーションプロパティは、シミュレートされたアニメーションJSよりも低かった（従来のアニメーションプロパティここで意味する：高さ、幅、不透明度、ボーダー幅、色... ..）