CSS3 animation介紹

本篇介紹的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基本內容就介紹完了。有些子屬性若是不明白原理的話，代碼給你都很難改，更別說本身寫。如今看到酷炫的動畫效果，能夠試着看看源碼，並對照着改爲本身想要的效果。下一篇將介紹一些常見實用的動畫效果。

更多資源上：去轉盤；或者加個人QQ羣一塊兒討論學習js，css等技術（QQ羣：512245829）