今天來聊聊css3中的動畫屬性animation，對這個屬性懵懂是在很早的時候有前輩用這個 animation 屬性來寫了一個菊花打轉的loading，然後google了一下知道了有這麼一個css動畫組件叫做 animation.css 其實還有很多這種動畫組件，他們很多都是基於jquery來操作的。
今天我們不是來談他們怎麼用的，只是來了解一下執行這些動作後的這個animation屬性，到底是怎麼起到作用的。
先上最終demo：奔跑的小人物
拿出手機手機掃一掃
假如你想要用非gif做一些css的逐幀動畫，那不妨可以看看這篇文章，說不定哪天還真用得著呢qq表情
animation介紹
對於這個css3屬性，w3c定義其為實驗性技術，那麼自然對於那些非高帥富瀏覽器來說都是痛，通過caniuse我們可以直觀看見這個屬性瀏覽器支持情況：
IE10+和firefox33+支持這個屬性切不需要寫私有前綴，chrome31+，safari7+，andriod4.1+都需要寫上自己的私有前綴才可以支持，不過oprea電腦端支持，但是移動端的卻不支持，無解。
屬性名: animation
屬性值: <single-animation>#
初始值: 詳見獨立屬性值
應用於: 所有元素
繼承性: 無
百分比: N/A
計算值:
single-animation的值有<a name="#typedef-single-animation-name" href="#typedef-single-animation-name" title="<single-animation-name>」><single-animation-name></a> || <a href="#time-value" title="<time>」><time> || <a href="#typedef-single-timing-function" title="<single-timing-function>」><single-timing-function></a> || <a href="#time-value" title="<time>」><time> || <a href="#typedef-single-animation-iteration-count" title="<single-animation-iteration-count>」><single-animation-iteration-count></a> || <a href="#typedef-single-animation-direction" title="<single-animation-direction>」><single-animation-direction> || <a href="#typedef-single-animation-fill-mode" title="<single-animation-fill-mode>」><single-animation-fill-mode></a> || <a href="#typedef-single-animation-play-state" title="<single-animation-play-state>」><single-animation-play-state>
其實這個animation 就是一個簡寫值，它包括了以上8個子屬性值，剛剛在上面也提到了，假如所有的瀏覽器都支持這個屬性的話就不需要填寫任何的前綴，如下：
.test{
animation:< 各種屬性值 >;
}
上面的只是適合firefox還有opera瀏覽器，假如說要兼容大部分的瀏覽器，那麼就應該這麼寫到：
.test{
-webkit-animation: < 各種屬性值 >;
-moz-animation: < 各種屬性值 >;
-o-animation: < 各種屬性值 >;
animation: < 各種屬性值 >;
}
不管是動畫還是視頻，我們都應該明白這麼一個東西：這個動畫叫什麼名字，它的播放時長、播放快慢、是否延遲播放、是否無限制播放次數、是否倒放、是否暫停是否都需要有所改變。
這些都是構成一段視頻所需的基本要求，當然你說你還要有一個特效什麼的要放哪裡，假如說在視頻播放在30s秒的時候插播一則廣告神馬之類的，那麼這時候就要知道 @keyframes 關鍵幀的概念了，css3中的動作很多都是依賴於這個 keyframes 關鍵幀來模擬執行另外一個css樣式。
通俗說點就是 animation 只是定義一個動畫的基本設置，但是@keyframes 才是通過改變動畫裡面的內容來達到模擬動畫的效果，走一段100m的路，我們要求你都是要在60分鐘內完成，每次前進一步都是保持相同動作前進，那麼，當作為旁觀者來看的話，假如忽略背景作為對比，其實他是感受不到人在動的，這個其實又涉及到一個參照物的關係了，動與不動都是相對來說，兩個同等速度的物體在移動，A看B，B是靜止的，但是靜止中的C看B，B是一直在動。
廢話這麼多，其實就是想說 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(< integer >[, [ 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，規定動畫是否反方向運動。
< single-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的直接可以去原始碼上看，這裡就不貼出來了，自己動手豐衣足食哈。
參考資料：
https://www.w3.org/TR/2013/WD-css3-transitions-20130212/#transition-timing-function-property
https://drafts.csswg.org/css-animations/#animation
本文轉自：http://xiaoho.com/?p=896
↓戳這裡，了解野狗！