より速いのは何ですか？ CSS3トランジションまたはjQueryアニメーション？
私はiPad HTML5アプリに取り組んでおり、イベントをより速くトリガーするためにすでにontouchサポートを実装しており、jQueryを使用して要素をより簡単にターゲットにしていますが、アニメーションにはCSS3トランジションを使用しています
もっと速いと思いますか？ライブラリをすでにインポートしているのでjQueryアニメーションを使用するか、jQueryで要素をターゲットにするときにCSS3トランジションを使用しますか？
this link によると、jQueryアニメーションはcssアニメーションよりもはるかに遅いです。
Reasonは、jqueryがタイマーとループを使用してDOM要素のプロパティを変更する必要があるためです。 CSSはブラウザエンジンの一部です。システムのハードウェアに大きく依存します。また、ChromeまたはFirefoxのプロファイリングで確認することもできます。
CSSアニメーションはほとんど常に高速です。
CSS遷移とjQueryのアニメーションの直接比較。タイマーを繰り返し実行するように設定するのではなく、遷移はブラウザによってネイティブに処理されます。私のやや非科学的なテストでは、トランジションは常に高速であり、特に要素数が多い場合、より高いフレームレートで実行されます。また、プラグインに頼るよりも、色を簡単にアニメーション化できるという利点もあります。
この記事（http://css-tricks.com/myth-busting-css-animations-vs-javascript/) は、CSS変換対jQueryアニメーション対GSAP（別のJavaScript図書館）。
CSSアニメーションはjQueryよりも大幅に高速です。ただし、私がテストしたほとんどのデバイスとブラウザーでは、JavaScriptベースのGSAPはCSSアニメーションよりも優れたパフォーマンスを発揮しました
したがって、CSS変換はjQueryアニメーションより高速ですが、CSS変換がJavaScriptより高速であると仮定させないでください。 GSAPは、JavaScriptがCSSよりも優れていることを示しています。
CSS3 Transitions should beはブラウザにネイティブであるため高速です。
そのcss3は高速で、メモリ消費量が少なく、スムーズです。 CSSプロセッサはC++で記述され、ネイティブコードは非常に高速に実行されますが、jQuery（JavaScript）はインタープリター言語であり、ブラウザーはJavaScriptを事前に予測できません。 http://dev.opera.com/articles/view/css3-vs-jquery-animations/
上記のリンクを表示して、CSS3対jQueryで行われた実験について知ってください。
CSS3はブラウザに標準で搭載されているため、高速になります。JQueryはロードする必要がある別のファイルですが、アニメーションによっては、JQueryがはるかにスムーズに実行できることがわかりました。時々、純粋なJavascriptを何度も試すのもいいことです。
Mozilla開発者向けドキュメントは、CSS3アニメーションに関する興味深い点をいくつか挙げています ：
ブラウザーがアニメーションシーケンスを制御できるようにすると、ブラウザーは、たとえば現在表示されていないタブで実行されているアニメーションの更新頻度を減らすなど、パフォーマンスと効率を最適化できます。
WebKit（Safariを搭載）はハードウェアアクセラレーションによる合成も利用します 。これは、現時点でJavascriptができることよりもパフォーマンスに大きな影響を与える可能性があります。 （これは、計算を管理するための機能が追加されるとすぐに変わると思います）これは、Javascriptのような翻訳言語を介して実行するのではなく、計算を実行できる場合、専用ハードウェアを利用するためです。
IPad上のWebKitがハードウェアアクセラレーションであるかどうかは100％確信できません。ただし、標準化され人気が高まっているため、時間の経過とともに改善されるだけであると考えるのは当然です。
から ここ
CSS遷移とjQueryのアニメーションの直接比較。タイマーを繰り返し実行するように設定するのではなく、遷移はブラウザによってネイティブに処理されます。私のやや非科学的なテストでは、トランジションは常に高速であり、特に要素数が多い場合、より高いフレームレートで実行されます。また、プラグインに頼るよりも、色を簡単にアニメーション化できるという利点もあります。
テスト ここ この結論とともに。
タイマーに基づいたJavascriptアニメーションは、同じ最適化を行うのに十分なブラウザーにアクセスできないため、ネイティブアニメーションほど速くなることはありません。これらのアニメーションは、レガシーブラウザでのみフォールバックとして使用する必要があります。
また、 this 、
CSS3アニメーションはひどいですが、プロセッサのパワーを多く使用します。 jQueryのようなフレームワークを使用するのと同じ方法でCSS3を使用してアニメーションを微調整する方法はありません。したがって、CSS3アニメーションがCPUに対応していない限り、jQueryを使用することをお勧めします。
ネイティブはより高速であると想定されていますが、ブラウザ開発者がずさんな（または怠）な）場合は、悪いコードを記述し、CSSアニメーション（または遷移）での結果が悪くなります。
現在、jQueryには「アニメーション」機能を「改善された」機能で上書きするプラグインがあります。 速度 を参照してください。この質問の範囲外であるため、JavaScriptを使用してDOMをアニメーション化する他の方法には触れていません。
そのため、現状では、jQueryはCSSよりも低速です。また、おそらく要素スタイルをすでに持っているため、CSSは記述しやすいため、JSをどこかで記述して管理する必要がある場合と比較して、いくつかのルールを追加するのは簡単です。しかし、複雑で重いものの場合、JSはより速く、悲しいことに。
この正確な質問に関する非常に良い記事- http://davidwalsh.name/css-js-animation
CanvasタグでjQuery/javascriptアニメーションを使用している場合（これを間違えないのであれば、まだタイマーに依存していますが、それをいじるのは初めてです）、javascriptによるハードウェアアクセラレーションの利点が得られます。ホバーしたときに何かを動かしたいだけなら、トランジションはうまく機能します。 CSSトランジションは少しスムーズに実行できますが、トレードオフです。トランジションを使用して、アニメーションに対するJavaScriptコントロールを大量に放棄します。 CSSのスタイルとJSの動作を維持するのが好きです-とにかく動作するはずですCSSトランジションは、その論理を破りました...