animate動畫解析

對於這個css3屬性，w3c定義其爲實驗性技術，那麼天然對於那些非高帥富瀏覽器來講都是痛，經過caniuse咱們能夠直觀看見這個屬性瀏覽器支持狀況：

IE10+和firefox33+支持這個屬性切不須要寫私有前綴，chrome31+，safari7+，andriod4.1+都須要寫上本身的私有前綴才能夠支持，不過oprea電腦端支持，可是移動端的卻不支持，無解。w3c的官方文檔

屬性名:	animation
屬性值:	<single-animation>#
初始值:	詳見獨立屬性值
應用於:	全部元素
繼承性:	無
百分比:	N/A
計算值:

single-animation的值有 || ||  ||  ||  ||  ||  || 

其實這個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([, [ 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

 

  網上找的，僅供參考！！！

 

參考資料：
http://dev.w3.org/csswg/css-animations/#animation
transition-timing-function-property