jQuery Animation實現CSS3動畫

jQuery Animation的工做原理是經過將元素的CSS樣式從一個狀態改變爲另外一個狀態。CSS屬性值是逐漸改變的，這樣就能夠建立動畫效果。只有數字值可建立動畫（好比 "margin:30px"）。字符串值沒法建立動畫（好比 "background-color:red"）。詳細用法請參考jQuery 效果 - animate() 方法和官方教程。

像CSS3好多效果由於不是數值的，因此是沒有辦法直接經過animate()方法實現的。如translate(), rotate(), scale(), skew(), matrix(), rotateX(), rotateY()等方法，這些方法的一個特色就是它們的值是字符和數字混合在一塊兒的。所以咱們是不能夠直接用animate()方法來動態地修改它們的值來實現動畫的效果。

若是咱們本身用JavaScript實現CSS3動畫，那麼咱們只能自已經過setInterval()方法來實現，實現起來比較複雜。其實animate()方法就是基於setInterval()方法進行工做的，可是能夠用方便的設置動畫速度，還能夠設置是勻速仍是變速。animate()方法的第二種用法有個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實現CSS3動畫