本文分享了用css3-animation來制作逐幀動畫的實現(xiàn)方法，供大家參考，具體內(nèi)容如下

常見用法：

兼容主流瀏覽器：

animation-name，規(guī)定要綁定的keyframes的名稱，隨便你取，不過為了日后維護的方便，建議取一個跟動作相關(guān)名稱相近的名稱比較好。比如要我們要綁定一個跑的動作，那么可以命名為run。

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

animation-timing-function，規(guī)定動畫的運動曲線，這里有9個值，分別是ease| linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps([, [ start | end ] ]?) | cubic-bezier(x1, y1, x2, y2)

ease：動畫緩慢開始，接著加速，最后減慢，默認(rèn)值;
linear：動畫從頭到尾的速度是相同的;
ease-in：以低速開始；
ease-out：以低速結(jié)束；
ease-in-out：動畫以低速開始和結(jié)束；

效果一樣 （按步數(shù)）steps

animation-iteration-count，動畫播放次數(shù)，默認(rèn)值為1，infinite為無限制，假如設(shè)置為無限制，那么動畫就會不停地播放。

animation-direction，規(guī)定動畫是否反方向運動。
= normal | reverse | alternate | alternate-reverse
第一個值是正常轉(zhuǎn)動播放，默認(rèn)值，reverse為反向轉(zhuǎn)動，alternate一開始正常轉(zhuǎn)動，播放完一次之后接著再反向轉(zhuǎn)動，假如設(shè)置animation-iteration-count:1則該值無效，alternate-reverse一開始為反向轉(zhuǎn)動，播完一次之后按照回歸正常轉(zhuǎn)動，交替轉(zhuǎn)動，設(shè)置count為1，則該值無效。
animation-play-state，定義動畫是否運行或暫停，這是后來新增的屬性，有兩個屬性值分別是running和paused。默認(rèn)值為normal，動畫正常播放。假如是為paused，那么動畫暫停。假如一個動畫一開始為運動，那么假如設(shè)置paused那么該動畫暫停，假如再設(shè)置running，那么該動畫會從剛才暫停處開始運動
animation-fill-mode，定義動畫播放時間之外的狀態(tài)，顧名思義，要么就是在動畫播放完了之后給它一個狀態(tài) animation-fill-mode : none | forwards | backwards | both; none，播放完之后不改變默認(rèn)行為，默認(rèn)值，forwards則是停在動畫最后的的那個畫面，backwards則是回調(diào)到動畫最開始出現(xiàn)的畫面，both則應(yīng)用為動畫結(jié)束或開始的狀態(tài)。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。

原文：http://www.cnblogs.com/woloveprogram/p/5258042.html

最新評論