css3的animation屬性

animation的屬性大體分爲如下幾種

animation-name     動畫名

 

animation-duration    動畫持續的事件

 

animation-timing-function     動畫的速度曲線，可選的值有  linear--勻速 ;  ease--默認。動畫以低速開始，而後加快，在結束前變慢。

  ease-in--動畫以低速開始。   ease-out--動畫以低速結束。

  ease-in-out--動畫以低速開始和結束。      cubic-bezier(n,n,n,n)--貝塞爾曲線，值是從 0 到 1 的數值

      同時animation-timing-function  也接受一個step（）函數  step（）接受兩個參數（num ， start/end）；這裏的num表明動畫分幾步完成

      ，start/end表明動畫執行完是開始的狀態仍是結尾的狀態。例：animation-timing-function:steps(9, start);

     

animation-delay      動畫延遲幾秒執行

 

animation-iteration-count      動畫的播放次數，可選n/infinite      n表明播放次數，infinite規定動畫無限次循環播放

 

animation-direction            定義是否應該輪流反向播放動畫        可選normal/alternate    normal正常播放，alternate動畫輪流反向播放。簡單舉例：

  一個方塊從左到右的動畫，2s完成。normal是動畫開始，方塊從左到右移動。2s結束後。方塊回到左邊，在繼續執行從左到右的動畫。

  alternate是動畫開始，方塊從左到右移動。2s結束後。方塊直接在右邊向左進行回去似的動畫

   

animation-play-state           動畫是否正在運行或暫停   paused/running

 

 animation-fill-mode               規定動畫在播放以前或以後，其動畫效果是否可見;  none--不改變默認行爲   forwards--當動畫完成後，保持最後一個屬性值（在最後一個關鍵幀中定義）

      backwards--在 animation-delay 所指定的一段時間內，在動畫顯示以前，應用開始屬性值（在第一個關鍵幀中定義）

      both--向前和向後填充模式都被應用.默認none；

    

    

    上述屬性寫的時候都寫兩遍，另外一遍加上-webkit-

 

 

 

舉例一我的物行走的動畫：這裏講所有用到上述屬性

css代碼以下：

.step {

width: 120px;

height: 134px;

background: url(../images/step.png);

-webkit-animation-timing-function:steps(9, start);

    animation-timing-function:steps(9, start);

    -webkit-animation-duration:.6s;

    animation-duration:.6s;

    -webkit-animation-name:step;

    animation-name:step;

    -webkit-animation-delay:.6s;

    animation-delay:.6s;

    animation-iteration-count:infinite;

    -webkit-animation-iteration-count:infinite;

    animation-direction:alternate;

    -webkit-animation-direction:alternate

}

@-webkit-keyframes step {

    0% {

        background-position:0 0

    }

    100% {

        background-position:1080px 0

    }

}

這裏的背景圖是分9幀的人物行走的各部分展現圖，動畫定義開始到結束的狀態，剩下的交給屬性去完成；