摘要：關(guān)于貝塞爾曲線和可以參照上一篇，和類似，不多贅述。單位是秒或毫秒。默認值是表示正常播放動畫。默認值表示動畫播完后，恢復(fù)到初始狀態(tài)。例如的動畫庫，里面設(shè)計出的貝塞爾曲線能讓動畫效果非常逼真。下一篇將介紹一些常見實用的動畫效果。

本篇介紹的animation屬性和傳統(tǒng)的動畫制作一樣，能控制幀的每一步，制作出更強大的動畫效果。

和其他CSS3屬性類似，animation包含很多子屬性，我們一起看看：

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-play-state
animation-fill-mode
@keyframes
animation-name指定@keyframes的名字，CSS加載時會應(yīng)用該名字的@keyframes規(guī)則來實現(xiàn)動畫

animation-duration動畫持續(xù)時間，默認是0表示無動畫，單位可以設(shè)s秒或ms毫秒

animation-timing-function動畫播放方式，默認值ease，可以設(shè)linear，ease，ease-in，ease-out，ease-in-out，cubic-bezier(n,n,n,n)，steps。關(guān)于貝塞爾曲線和steps可以參照上一篇transition，和transition-timing-function類似，不多贅述。

animation-delay延遲開始動畫的時間，默認值是0，表示不延遲，立即播放動畫。單位是s秒或ms毫秒。允許設(shè)負時間，意思是讓動畫動作從該時間點開始啟動，之前的動畫不顯示。例如-2s 使動畫馬上開始，但前 2 秒的動畫被跳過。

animation-iteration-count動畫循環(huán)播放的次數(shù)，默認值為1，即放完一遍后不循環(huán)播放。除數(shù)字外也可以設(shè)關(guān)鍵字infinite表示無限循環(huán)播放。

animation-direction動畫播放的方向，可設(shè)normal，alternate，alternate-reverse。默認值是normal表示正常播放動畫。alternate表示輪轉(zhuǎn)正反向播放動畫，即動畫會在奇數(shù)次（1，3，5…）正常播放，而在偶數(shù)次（2，4，6…）反向播放。alternate-reverse正好反過來，奇數(shù)次反向播動畫，偶數(shù)次正向播動畫。看效果點這里

.myDiv1 {
    width: 75px;
    height: 75px;
    background-color: red;
    position:relative;
    animation:aDirection 5s infinite;
} 
@keyframes aDirection {
    from {left:0px;}
    to {left:200px;}
}
.alter { animation-direction:alternate; }
.alterR { animation-direction:alternate-reverse; } 

有什么用呢？其實例子頁面就能看到alternate/alternate-reverse的動畫效果可以平滑地實現(xiàn)反轉(zhuǎn)效果。例如例子頁面中閃爍提示的例子。你可以用text-decoration: blink來實現(xiàn)閃爍，但它的功能有限支持有限。用CSS3動畫實現(xiàn)的閃爍效果更棒。（當然閃爍的使用必須克制，要定時定次數(shù)，不能無限閃。無限閃通常會讓用戶很生氣后果很嚴重）：

@keyframes blink { 
    to { color: transparent }     //文字色平滑過渡到透明
}
.blink {
    animation: .5s blink 6;    //觸發(fā)動畫6次，因為設(shè)了alternate，所以看上去閃爍了3次
    animation-direction: alternate;
}

animation-play-state動畫的狀態(tài)，可設(shè)running，paused。默認值running表示正在播放動畫，paused表示暫停動畫。通常在JS端使用該屬性object.style.animationPlayState=”paused”來暫停動畫。

animation-fill-mode動畫的時間外屬性，可設(shè)none，forwards，backwards，both。默認值none表示動畫播完后，恢復(fù)到初始狀態(tài)。forwards當動畫播完后，保持@keyframes里最后一幀的屬性。backwards表示開始播動畫時，應(yīng)用@keyframes里第一幀的屬性，要看出效果，通常要設(shè)animation-delay延遲時間。both表示forwards和backforwards都應(yīng)用。

例如設(shè)置2s的延遲時間。初始為紅色，第一幀動畫變?yōu)榫G色，最后一幀動畫變?yōu)樗{色?？葱Чc這里

.myDiv2 {
    width: 75px;
    height: 75px;
    background-color: red;
    position:relative;
    animation:mymove 5s 1 2s;
}
@keyframes mymove {
    from {left:0px; background-color:green;}
    to {left:200px; background-color: blue;}
}
.forwards { animation-fill-mode:forwards; }
.bkforwards { animation-fill-mode:backwards; }
.both { animation-fill-mode:both; } 

圖1不解釋了，最正常的效果，初始為紅色，動畫開始成綠色，動畫結(jié)束成藍色，結(jié)束后恢復(fù)初始狀態(tài)紅色。圖2設(shè)成forwards，和圖1的區(qū)別是動畫結(jié)束后不恢復(fù)初始狀態(tài)，仍舊是藍色。圖3設(shè)成backwards，在動畫開始前（即延遲時間段內(nèi)）應(yīng)用第一幀的動作，設(shè)成了綠色，動畫結(jié)束后恢復(fù)原始狀態(tài)。圖4設(shè)成both兼具forwards和backwards的效果。

@keyframes動畫幀就是區(qū)別animation和transition的關(guān)鍵。在transition中是無法更細致地控制時間段內(nèi)執(zhí)行的動作的，而在animation中用@keyframes可以細致地指定第一幀要干什么，第二幀要干什么。

語法：@keyframes開頭，后接animation-name。實體內(nèi)可以創(chuàng)建%百分比來劃分時間段。關(guān)鍵字from等于0%，to等于100%。

@keyframes mymove {
    0%   {top:0px; left:0px; background:red;}
    25%  {top:0px; left:100px; background:blue;}
    50%  {top:100px; left:100px; background:yellow;}
    75%  {top:100px; left:0px; background:green;}
    100% {top:0px; left:0px; background:red;} 
}

為節(jié)約篇幅，各種瀏覽器前綴均省略，如Firefox用@-moz-keyframes，Chrome和Safari用@-webkit-keyframes，Opera用@-o-keyframes。提醒一下@keyframes只是定義了一個動畫效果，但要使動畫生效，必須用animate屬性將動畫綁定到具體某DOM元素上才行。

你可以多帶帶指定上面這些子屬性，也可以像background等屬性一樣，合并在animation屬性里指定。例如animation: moveten 1s step(10,end) infinite alternate 3s backwards;。但合并時要注意，因為有animation-duration和animation-delay都是時間，瀏覽器會根據(jù)先后順序，將第一個時間認作為animation-duration，第二個時間認作為animation-delay。

分開指定可能代碼清晰點，但因為頁面需要適應(yīng)各瀏覽器時，每個都要加上-ms，-moz等前綴的話代碼會變的很多，合并在一起代碼稍微少點。

另外也可以同時指定多個動畫效果，例如animation: moveten1 1s ease .5s, moveten2 2s ease 1s forwards;

總結(jié)
animation的參數(shù)不算多，但知道理論是一回事，能否寫出精妙的動畫效果是另一回事。除非你特有天賦，否則可以借鑒牛人們的設(shè)計。例如Dan Eden的animate.css動畫庫，里面設(shè)計出的貝塞爾曲線能讓動畫效果非常逼真。

CSS3里三大動畫相關(guān)屬性transform，transition，animation基本內(nèi)容就介紹完了。有些子屬性如果不明白原理的話，代碼給你都很難改，更別說自己寫?，F(xiàn)在看到酷炫的動畫效果，可以試著看看源碼，并對照著改成自己想要的效果。下一篇將介紹一些常見實用的動畫效果。

更多資源上：去轉(zhuǎn)盤；或者加我的QQ群一起討論學(xué)習(xí)js，css等技術(shù)（QQ群：512245829）