CSS3新增樣式大解析：[8]animation之元素動畫

CSS3中添加的新屬性animation是用來爲元素實現動畫效果的。但是animation無法單獨擔當起實現動畫的效果。這個我們會在後面講到。我們先來講講animation的相關用法。這裏我的代碼均是採用標準的css3規範書寫，大家使用的時候爲了兼容可加上-webkit-、-o-、-ms-、-moz-、-khtml-等前綴以適應不同的瀏覽器。

方法/步驟

1
animation有且可以設置許多個值，這意味着他也有許多個下分的小屬性。
正如之前講到的scale（）可以生出scaleX（）、scaleY（）等。
下面我就來細細的講述各個小分屬性
animation-name
第一個屬性動畫名稱，這個動畫名稱是在@key-frames當中規定的，這也是我在開始的時候就說了animation無法單獨當起動畫實現的原因。因爲實質性的動畫效果都是在@key-frames當中設定好的。
實例：
animation-name：myAnimation；
animation-duration
第二個屬性規定了動畫時間。
也就是執行動畫所運行的時間，他的單位是s或者hg毫秒，默認情況下爲0。
實例：
animation-duration：5s
animation-timing-function
第三個屬性定義了實現動畫的方式（速度曲線），有這麼幾個值可以選擇：
ease（默認的：慢-快-慢）、ease-in（緩入）、ease-out（緩出）、ease-in-out、linear（勻速）、cubic-bezier（n,n,n,n）【每個n的取值均在0-1之間】
step-start：馬上轉跳到動畫結束狀態。
step-end：保持動畫開始狀態，直到動畫執行時間結束，馬上轉跳到動畫結束狀態。
steps(<number>[, [ start | end ] ]?)：第一個參數number爲指定的間隔數，即把動畫分爲n步階段性展示，第二個參數默認爲end，設置最後一步的狀態，start爲結束時的狀態，end爲開始時的狀態，若設置與animation-fill-mode的效果衝突，而以animation-fill-mode的設置爲動畫結束的狀態。這個太複雜了！
animation-delay
第四個屬性規定了動畫的延遲執行時間，及延遲多久才執行，默認情況下爲0；
若爲證書，則按設置的時間執行；
若爲負數，則截去相應的動畫時間，從動畫中間執行。比如我的動畫時間爲20S，現在設置該值爲-5s，那麼動畫最後執行的時間是後面的15秒。
animation-iteration-count
規定動畫執行的次數，默認的情況下執行1次，你也可以設置爲5，或者10；如果你想讓動畫一直執行下去的話：將值設置爲infinite即可，它表示無限的意思。
向下面的圖片小圈的旋轉就是無限的循環rotate實現的，這可以省去製作一張gif動畫圖所花費的大量時間。
animation-direction
它規定了動畫執行的方向，他在動畫執行的下一週期生效（也就是在首次播放不受影響）且規定了動畫執行的次數必須是2次及以上。否則該屬性無效果。他的值有normal和alternate、reverse和alternate-reverse兩個，
normal的方式A-B-c—A-B-c...
alternate的方式A-B--C-B-A-B-C...
reverse的方向和normal的方向相反，alternate-reverse的方向和alternate的方向相反。
animation-play-state
設置動畫的播放狀態，可取的值有paused和running兩個，前者是暫停，後者是運行。
最後一個相關的屬性是animation-fill-mode
它的值有forwards和backwards，both以及none。用來規定動畫執行完後的顯示狀態，forwards表示動畫播放結束的最後是什麼狀態，那播放完就是什麼狀態；backwards表示動畫播放完後又回到動畫初始執行時的狀態顯示（也就是沒有執行動畫前的狀態）。
需要說明的是：
animation-play-state的屬性不能像起他的屬性一樣合寫如animation當中，而需要單獨設置。
由於涉及到動畫，截圖無法展示，顧不放圖了。
animation的兼容性在谷歌火狐opera以及Safari的瀏覽器上實現的比較好，而在IE上至少是IE10才能實現動畫效果，比較坑。