上一篇transition過渡屬性通過讓屬性在時(shí)間段內(nèi)根據(jù)貝塞爾曲線平滑過渡，呈現(xiàn)出動畫效果茄茁，但畢竟功能有限赤拒。本篇介紹的animation屬性和傳統(tǒng)的動畫制作一樣架曹，能控制幀的每一步，制作出更強(qiá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í)會應(yīng)用該名字的@keyframes規(guī)則來實(shí)現(xiàn)動畫
animation-duration動畫持續(xù)時(shí)間杰标，默認(rèn)是0表示無動畫兵怯，單位可以設(shè)s秒或ms毫秒
animation-timing-function動畫播放方式，默認(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延遲開始動畫的時(shí)間，默認(rèn)值是0柔滔，表示不延遲溢陪，立即播放動畫。單位是s秒或ms毫秒睛廊。允許設(shè)負(fù)時(shí)間形真，意思是讓動畫動作從該時(shí)間點(diǎn)開始啟動，之前的動畫不顯示超全。例如-2s 使動畫馬上開始咆霜，但前 2 秒的動畫被跳過。
animation-iteration-count動畫循環(huán)播放的次數(shù)嘶朱，默認(rèn)值為1蛾坯，即放完一遍后不循環(huán)播放。除數(shù)字外也可以設(shè)關(guān)鍵字infinite表示無限循環(huán)播放见咒。
animation-direction動畫播放的方向偿衰，可設(shè)normal挂疆，alternate改览，alternate-reverse。默認(rèn)值是normal表示正常播放動畫缤言。alternate表示輪轉(zhuǎn)正反向播放動畫宝当，即動畫會在奇數(shù)次（1，3胆萧，5…）正常播放庆揩，而在偶數(shù)次（2俐东，4，6…）反向播放订晌。alternate-reverse正好反過來虏辫，奇數(shù)次反向播動畫，偶數(shù)次正向播動畫锈拨∑鲎看效果點(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; }
<div class="myDiv1"></div>
<div class="myDiv1 alter"></div>
<div class="myDiv1 alterR"></div>
有什么用呢？其實(shí)例子頁面就能看到alternate/alternate-reverse的動畫效果可以平滑地實(shí)現(xiàn)反轉(zhuǎn)效果奕枢。例如例子頁面中閃爍提示的例子娄昆。你可以用text-decoration: blink來實(shí)現(xiàn)閃爍，但它的功能有限支持有限缝彬。用CSS3動畫實(shí)現(xiàn)的閃爍效果更棒萌焰。（當(dāng)然閃爍的使用必須克制，要定時(shí)定次數(shù)谷浅，不能無限閃扒俯。無限閃通常會讓用戶很生氣后果很嚴(yán)重）：
@keyframes blink {
to { color: transparent } //文字色平滑過渡到透明
}
.blink {
animation: .5s blink 6; //觸發(fā)動畫6次，因?yàn)樵O(shè)了alternate一疯，所以看上去閃爍了3次
animation-direction: alternate;
}
animation-play-state動畫的狀態(tài)陵珍，可設(shè)running，paused违施。默認(rèn)值running表示正在播放動畫互纯，paused表示暫停動畫。通常在JS端使用該屬性object.style.animationPlayState=”paused”來暫停動畫磕蒲。
animation-fill-mode動畫的時(shí)間外屬性留潦，可設(shè)none，forwards辣往，backwards兔院，both。默認(rèn)值none表示動畫播完后站削，恢復(fù)到初始狀態(tài)坊萝。forwards當(dāng)動畫播完后，保持@keyframes里最后一幀的屬性许起。backwards表示開始播動畫時(shí)十偶，應(yīng)用@keyframes里第一幀的屬性，要看出效果园细，通常要設(shè)animation-delay延遲時(shí)間惦积。both表示forwards和backforwards都應(yīng)用。
例如設(shè)置2s的延遲時(shí)間猛频。初始為紅色狮崩，第一幀動畫變?yōu)榫G色蛛勉，最后一幀動畫變?yōu)樗{(lán)色∧啦瘢看效果點(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; }
<div class="myDiv2"></div>
<div class="myDiv2 forwards"></div>
<div class="myDiv2 bkforwards"></div>
<div class="myDiv2 both"></div>
圖1不解釋了诽凌，最正常的效果，初始為紅色坦敌，動畫開始成綠色皿淋，動畫結(jié)束成藍(lán)色，結(jié)束后恢復(fù)初始狀態(tài)紅色恬试。圖2設(shè)成forwards窝趣，和圖1的區(qū)別是動畫結(jié)束后不恢復(fù)初始狀態(tài)，仍舊是藍(lán)色训柴。圖3設(shè)成backwards哑舒，在動畫開始前（即延遲時(shí)間段內(nèi)）應(yīng)用第一幀的動作，設(shè)成了綠色幻馁，動畫結(jié)束后恢復(fù)原始狀態(tài)洗鸵。圖4設(shè)成both兼具forwards和backwards的效果。
@keyframes動畫幀就是區(qū)別animation和transition的關(guān)鍵仗嗦。在transition中是無法更細(xì)致地控制時(shí)間段內(nèi)執(zhí)行的動作的膘滨，而在animation中用@keyframes可以細(xì)致地指定第一幀要干什么，第二幀要干什么稀拐。
語法：@keyframes開頭火邓，后接animation-name。實(shí)體內(nèi)可以創(chuàng)建%百分比來劃分時(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è)動畫效果，但要使動畫生效恐仑，必須用animate屬性將動畫綁定到具體某DOM元素上才行泉坐。
你可以單獨(dú)指定上面這些子屬性，也可以像background等屬性一樣菊霜，合并在animation屬性里指定坚冀。例如animation: moveten 1s step(10,end) infinite alternate 3s backwards;。但合并時(shí)要注意鉴逞，因?yàn)橛衋nimation-duration和animation-delay都是時(shí)間记某，瀏覽器會根據(jù)先后順序，將第一個(gè)時(shí)間認(rèn)作為animation-duration构捡，第二個(gè)時(shí)間認(rèn)作為animation-delay液南。
分開指定可能代碼清晰點(diǎn)，但因?yàn)轫撁嫘枰m應(yīng)各瀏覽器時(shí)勾徽，每個(gè)都要加上-ms滑凉，-moz等前綴的話代碼會變的很多，合并在一起代碼稍微少點(diǎn)喘帚。
另外也可以同時(shí)指定多個(gè)動畫效果畅姊，例如animation: moveten1 1s ease .5s, moveten2 2s ease 1s forwards;
總結(jié)
animation的參數(shù)不算多，但知道理論是一回事吹由，能否寫出精妙的動畫效果是另一回事若未。除非你特有天賦，否則可以借鑒牛人們的設(shè)計(jì)倾鲫。例如Dan Eden的animate.css動畫庫粗合，里面設(shè)計(jì)出的貝塞爾曲線能讓動畫效果非常逼真。
CSS3里三大動畫相關(guān)屬性transform乌昔，transition隙疚，animation基本內(nèi)容就介紹完了。有些子屬性如果不明白原理的話磕道，代碼給你都很難改供屉，更別說自己寫。現(xiàn)在看到酷炫的動畫效果溺蕉，可以試著看看源碼贯卦，并對照著改成自己想要的效果。下一篇將介紹一些常見實(shí)用的動畫效果焙贷。
