CSS3アニメーションとJQueryアニメーションの違いは何ですか

css3 アニメーションと jquery アニメーションの違い: 1. css3 は 3d アニメーションを設定できますが、jquery は 3d アニメーションを実現できません; 2. css の 2d マトリックス アニメーションはより効率的で、他の属性アニメーションは効率的ではありません。 margin と left では、トップ シミュレーションのマトリックス アニメーション効率が低く、他の属性のアニメーション効率が高くなります。

このチュートリアルの動作環境: Windows10 システム、CSS3&&jquery3.2.1 バージョン、Dell G3 コンピューター。

css3 アニメーションと jquery アニメーションの違いは何ですか

css3 アニメーションと jquery アニメーションの長所と短所の比較について:

CSS3 アニメーションは 2D、3D、および従来のアニメーション プロパティ インターフェイスでは、ページ上の任意の要素の任意の属性に対して動作できます。CSS3 アニメーションは C 言語で書かれています。システム レベルのアニメーションなので、その効率は JS でシミュレートされたアニメーションよりも確実に高いです。これは本当に場合？ ？

テストの結果、CSS3 アニメーションと JavaScript シミュレーション アニメーションには次の違いがあることがわかりました:

1. CSS 3D アニメーションは js では実現できません;

CSS3 の 3D アニメーションは、3 次元空間で動作するため、CSS3 の非常に強力な機能です。そのため、js では CSS3 のような 3D アニメーションをシミュレートできません。もちろん、この 3D アニメーションの実際の応用シナリオは非常に幅広いのでしょうか?検討する価値があります...

2. CSS 2D マトリックス アニメーションの効率は、マージンと left,top;

を使用して js によってシミュレートされたマトリックス アニメーションよりも高くなります。 CSS3の2Dアニメーションとは、スケーリング\デフォーメーション\x軸\y軸などの2DマトリックスのTransform変更のことを指しますが、当然jsでは変形アニメーションはできません。座標アニメーションを例に挙げます。テストの結果、CSS3 変換を使用してtranslateXY アニメーションを作成すると、js のposition

left およびposition right よりも約 700mm 高速であることがわかりました。また、視覚的にも js アニメーションよりもはるかにスムーズです。 。

CSS3 の他の従来のアニメーション プロパティの効率は、JS でシミュレートされたアニメーションの効率よりも低くなります。

ここでの従来のアニメーション プロパティとは、高さ、幅、不透明度、 border-width ,color.....

Android HTC で DOM 要素を height:0 から height:100 に変更するテストをしたことがあります。jQuery

animate と CSS3 のトランジションとアニメーションを使用しました。結果は、CSS3 の遷移とアニメーションの両方が jQuery

animate よりも 500mm 遅いことを示しています。他の通常のアニメーション プロパティは、jQuery animate! よりも 400 ～ 500mm 遅くなります。

(学習ビデオ共有: css ビデオ チュートリアル)

以上がCSS3アニメーションとJQueryアニメーションの違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。