前言

趁著還沒有元旦之前先碼一篇文章，不然到時候估計又被各種虐了，所以趁現在還有力氣先來一篇。今天來聊聊css3中的動畫屬性animation，對這個屬性懵懂是在很早的時候有前輩用這個 animation 屬性來寫了一個菊花打轉的loading，然後google了一下知道了有這麼一個css動畫元件叫做 animation.css 其實還有很多這種動畫元件，他們很多都是基於jquery來操作的。今天我們不是來談他們怎麼用的，只是來了解一下執行這些動作後的這個animation屬性，到底是怎麼起到作用的。

先上最終demo：奔跑的小人物
或者拿出手機手機掃一掃

動態效果如下

假如你想要用非gif做一些css的逐幀動畫，那不妨可以看看這篇文章，說不定哪天還真用得著呢

animation介紹

對於這個css3屬性，w3c定義其為實驗性技術，那麼自然對於那些非高帥富瀏覽器來說都是痛，通過caniuse我們可以直觀看見這個屬性瀏覽器支援情況：

IE10+和firefox33+支援這個屬性切不需要寫私有字首，chrome31+，safari7+，andriod4.1+都需要寫上自己的私有字首才可以支援，不過oprea電腦端支援，但是移動端的卻不支援，無解。w3c的官方文件

其實這個animation 就是一個簡寫值，它包括了以上8個子屬性值，剛剛在上面也提到了，假如所有的瀏覽器都支援這個屬性的話就不需要填寫任何的字首，如下：

.test{
	animation:;
    }

上面的只是適合firefox還有opera瀏覽器，假如說要相容大部分的瀏覽器，那麼就應該這麼寫到：

.test{
  -webkit-animation: ;
     -moz-animation: ;
       -o-animation: ;
          animation: ;
    }

不管是動畫還是視訊，我們都應該明白這麼一個東西：這個動畫叫什麼名字，它的播放時長、播放快慢、是否延遲播放、是否無限制播放次數、是否倒放、是否暫停是否都需要有所改變。這些都是構成一段視訊所需的基本要求，當然你說你還要有一個特效什麼的要放哪裡，假如說在視訊播放在30s秒的時候插播一則廣告神馬之類的，那麼這時候就要知道 @keyframes

廢話這麼多，其實就是想說 animation 是要依賴 @keyframes 生存的，不然它就沒有存在的意義。

animation-name，規定要繫結的keyframes的名稱，隨便你取，不過為了日後維護的方便，建議取一個跟動作相關名稱相近的名稱比較好。比如要我們要繫結一個跑的動作，那麼可以命名為run。

time，這裡有兩個時間，前面一個是規定完成這個動畫所需要的時間，全稱叫animation-duration，第二個time為動畫延遲開始播放的時間，全稱叫animation-delay，這兩個數值可以用秒’s’也可以用微秒’ms’來寫，1000ms=1s，這個不用一一介紹。

animation-timing-function，規定動畫的運動曲線，這裡有9個值，分別是ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps([, [ start | end ] ]?) | cubic-bezier(x1, y1, x2, y2)
ease：動畫緩慢開始，接著加速，最後減慢，預設值;
linear：動畫從頭到尾的速度是相同的;
ease-in：以低速開始；
ease-out：以低速結束；
ease-in-out：動畫以低速開始和結束；
說說這個 steps(n,[ start | end ] ]?)這個階梯函式，這個函式可以把動畫平均劃分為基本相等的，這個n是一個自然數，意思就是把一個動畫平均分成n等分，直到平均地走完這個動畫，這個要跟linear區別開來，因為linear是把動畫作為一個整體，中間沒有斷點，而steps是把動畫分段平均執行開來。step-start等同於steps(1,start)，動畫分成1步，動畫執行時為開始左側端點的部分為開始；step-end等同於steps(1,end)：動畫分成一步，動畫執行時以結尾端點為開始，預設值為end。對此，w3c圖解如下：
 
利用這個step階梯函式我們可以做出像一開始我們做出的逐幀動畫的效果
PS:其實，我對這個函式有點疑惑不解，這個steps(1,start)，按照我的理解應該是從動畫第二張圖片作為動畫的開始，有哪位知道這個step更加具體的介紹麻煩告知一下，因為這樣可以少寫後面的keyframes 中的css樣式，比如下面的兩個函式在執行動畫來說都是一樣的：

.test1{
 background:url(http://img.xiaoho.com/2014/12/test.png) no-repeat 0 0;
 -webkit-animation:run 350ms steps(1) infinite 0s;}
@-webkit-keyframes run {	
	0% {
       	background-position:0;
    }
	20% {
       background-position:-90px 0;
    }
	40% {
       background-position:-180px 0;
    }
	60% {
       background-position:-270px 0;
    }
	80% {
       background-position:-360px 0;
    }
	100% {
       background-position:-450px 0;
    }
	
}
.test2{
 background:url(http://img.xiaoho.com/2014/12/test.png) no-repeat 0 0;
 -webkit-animation:run 350ms steps(5) infinite 0s;}

@-webkit-keyframes run {
	100% {
       background-position:-450px 0;
    }
	
}

圖片如下

圖片只需要5步即可完成即可完成整個動作。

這兩個在執行起來其實是一樣的，第一種是把動畫分成一步，動畫開始以結尾端點為起點開始執行，然後在0%，20,40,80,100執行了背景圖的切換；而第二種是動畫分成5步，然後在100%處的時候呼叫最後一張背景圖。

animation-iteration-count，動畫播放次數，預設值為1，infinite為無限制，假如設定為無限制，那麼動畫就會不停地播放。

animation-direction，規定動畫是否反方向運動。
= normal | reverse | alternate | alternate-reverse
第一個值是正常轉動播放，預設值，reverse為反向轉動，alternate一開始正常轉動，播放完一次之後接著再反向轉動，假如設定animation-iteration-count:1則該值無效，alternate-reverse一開始為反向轉動，播完一次之後按照迴歸正常轉動，交替轉動，設定count為1，則該值無效。具體效果請拿手手機掃描樓下二維碼

animation-play-state，定義動畫是否執行或暫停，這是後來新增的屬性，有兩個屬性值分別是running和paused。預設值為normal，動畫正常播放。假如是為paused，那麼動畫暫停。假如一個動畫一開始為運動，那麼假如設定paused那麼該動畫暫停，假如再設定running，那麼該動畫會從剛才暫停處開始運動，可能說得有點小拗口，那麼可以前往w3c看demo

animation-fill-mode，定義動畫播放時間之外的狀態，顧名思義，要麼就是在動畫播放完了之後給它一個狀態
animation-fill-mode : none | forwards | backwards | both; none，播放完之後不改變預設行為，預設值，forwards則是停在動畫最後的的那個畫面，backwards則是回撥到動畫最開始出現的畫面，both則應用為動畫結束或開始的狀態，不上示例貌似對不起觀眾了，那就來一個小demo

結語

好了，天色已晚就暫時寫這麼多了，做了一個最終hot打架小動畫出來，各位可以欣賞一下，拿出手機出來掃掃可能說不定你真的會對這個animation屬性感興趣哦。

內啥，想要看css的直接可以去原始碼上看，這裡就不貼出來了，自己動手豐衣足食哈。

那麼，祝大家新年快樂，2014再見！