jQuery Animation CSS 3アニメーションを実現

jQuery Animationの動作原理は、要素のCSSスタイルをある状態から別の状態に変更することです.CSSアトリビュート値は徐々に変化し、アニメーション効果を作成できます.アニメーションを作成できるのは数値値のみです(margin:30 pxなど).文字列値はアニメーションを作成できません(background-color:redなど).詳細はjQuery効果-animate()メソッドおよび公式チュートリアル。を参照してください.
CSS 3のような多くの効果は数値ではないので、animate()メソッドで直接実現することはできません.translate()、rotate()、scale()、skew()、matrix()、rotateX()、rotateY()などの方法の1つの特徴は、文字と数字が混在していることです.したがって、アニメーションの効果を直接animate()メソッドで動的に変更することはできません.
私たち自身がJavaScriptでCSS 3アニメーションを実装する場合、setInterval()メソッドで実装するしかなく、実装は複雑です.実はanimate()メソッドはsetInterval()メソッドに基づいて動作しますが、アニメーションの速度を便利に設定したり、均一速度か変速かを設定したりすることができます.animate()メソッドの2番目の使い方にはstepパラメータがあり、アニメーションの各ステップで実行する関数を規定します.要素効果に影響を及ぼさない顕著なCSS値を用いてanimate()メソッドをトリガし、stepコールバック関数で修正したい値を修正することで、間接的にアニメーションを実現することができます.transformの例を見てください.

        <div id="box"></div>

        

        #box {

          width:100px;

          height:100px;

          position:absolute;

          top:100px;

          left:100px; 

          text-indent: 90px;

          background-color:red;

       }

       

       $('#box').animate({  textIndent: 0 }, {

         step: function(now,fx) {

           $(this).css('-webkit-transform','rotate('+now+'deg)'); 

         },

         duration:'slow'

       },'linear');

      

ここでtext-indentプロパティを使用してアニメーションをトリガーするのは、ここに文字がないため、要素のスタイル効果に影響を与えることなくtext-indentを使用し、font-sizeなども使用できます.その後、animate()メソッドで生成されたリズムを使用してアニメーションを実現します.このようにすれば、私たちは多くの効果を実現することができます.具体例はここ参照
リファレンスドキュメント

jQuery効果-animate()メソッド

.animate()

転載する必要がある場合は、BorisHuai先端修練>jQuery Animation CSS 3アニメーションを実現