上一篇transition過渡屬性通過讓屬性在時間段內根據貝塞爾曲線平滑過渡，呈現出動畫效果，但畢竟功能有限。本篇介紹的animation屬性和傳統的動畫制作一樣，能控制幀的每一步，制作出更強大的動畫效果。

和其他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加載時會應用該名字的@keyframes規則來實現動畫

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

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

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

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

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

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

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

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

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

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

例如設置2s的延遲時間。初始為紅色，第一幀動畫變為綠色，最后一幀動畫變為藍色。看效果點這里

.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不解釋了，最正常的效果，初始為紅色，動畫開始成綠色，動畫結束成藍色，結束后恢復初始狀態紅色。圖2設成forwards，和圖1的區別是動畫結束后不恢復初始狀態，仍舊是藍色。圖3設成backwards，在動畫開始前（即延遲時間段內）應用第一幀的動作，設成了綠色，動畫結束后恢復原始狀態。圖4設成both兼具forwards和backwards的效果。

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

語法：@keyframes開頭，后接animation-name。實體內可以創建%百分比來劃分時間段。關鍵字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;} 
}

為節約篇幅，各種瀏覽器前綴均省略，如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都是時間，瀏覽器會根據先后順序，將第一個時間認作為animation-duration，第二個時間認作為animation-delay。

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

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

總結

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

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