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

本篇介紹的animation屬性和傳統(tǒng)的動(dòng)畫制作一樣，能控制幀的每一步，制作出更強(qiáng)大的動(dò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加載時(shí)會(huì)應(yīng)用該名字的@keyframes規(guī)則來(lái)實(shí)現(xiàn)動(dòng)畫

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

animation-timing-function動(dòng)畫播放方式，默認(rèn)值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延遲開(kāi)始動(dòng)畫的時(shí)間，默認(rèn)值是0，表示不延遲，立即播放動(dòng)畫。單位是s秒或ms毫秒。允許設(shè)負(fù)時(shí)間，意思是讓動(dòng)畫動(dòng)作從該時(shí)間點(diǎn)開(kāi)始啟動(dòng)，之前的動(dòng)畫不顯示。例如-2s 使動(dòng)畫馬上開(kāi)始，但前 2 秒的動(dòng)畫被跳過(guò)。

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

animation-direction動(dòng)畫播放的方向，可設(shè)normal，alternate，alternate-reverse。默認(rèn)值是normal表示正常播放動(dòng)畫。alternate表示輪轉(zhuǎn)正反向播放動(dòng)畫，即動(dòng)畫會(huì)在奇數(shù)次（1，3，5…）正常播放，而在偶數(shù)次（2，4，6…）反向播放。alternate-reverse正好反過(guò)來(lái)，奇數(shù)次反向播動(dòng)畫，偶數(shù)次正向播動(dòng)畫?？葱Чc(diǎn)這里

.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; } 

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

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

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

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

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

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

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

語(yǔ)法：@keyframes開(kāi)頭，后接animation-name。實(shí)體內(nèi)可以創(chuàng)建%百分比來(lái)劃分時(shí)間段。關(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只是定義了一個(gè)動(dòng)畫效果，但要使動(dòng)畫生效，必須用animate屬性將動(dòng)畫綁定到具體某DOM元素上才行。

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

分開(kāi)指定可能代碼清晰點(diǎn)，但因?yàn)轫?yè)面需要適應(yīng)各瀏覽器時(shí)，每個(gè)都要加上-ms，-moz等前綴的話代碼會(huì)變的很多，合并在一起代碼稍微少點(diǎn)。

另外也可以同時(shí)指定多個(gè)動(dòng)畫效果，例如animation: moveten1 1s ease .5s, moveten2 2s ease 1s forwards;

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

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

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