CSS3中動(dòng)畫涉及到三個(gè)屬性，一個(gè)是Transform：變形；一個(gè)是Transition：過渡，一個(gè)是Animation：動(dòng)畫。其中Transform、Animation可以搭配著使用，實(shí)現(xiàn)復(fù)雜動(dòng)畫，Transition可以實(shí)現(xiàn)簡(jiǎn)單動(dòng)畫。
有時(shí)候，Transition過渡不能解決我們想要的動(dòng)畫效果，我們希望動(dòng)畫的過渡程度更加復(fù)雜有層次，這個(gè)時(shí)候就要用到Animation。
當(dāng)然CSS3中的Animation與HTML5中的Canvas繪制動(dòng)畫又不同，Animation只應(yīng)用在頁(yè)面上已存在的DOM元素上，做出來的動(dòng)畫相比較Flash、JavaScript及jQuery制作出來的動(dòng)畫效果稍顯粗糙些。
Animation有下面這些屬性：
| 屬性 | 描述 |
|---|---|
| animation | 簡(jiǎn)寫屬性，用于在一個(gè)屬性中設(shè)置8個(gè)動(dòng)畫屬性 |
| animation-name | 規(guī)定需要綁定到選擇器的keyframe名稱 |
| animation-duration | 規(guī)定完成動(dòng)畫所花費(fèi)的時(shí)間，以秒或毫秒計(jì)。 |
| animation-timing-function | 規(guī)定動(dòng)畫的速度曲線。跟transition一樣。 |
| animation-delay | 規(guī)定在動(dòng)畫開始之前的延遲。 |
| animation-iteration-count | 規(guī)定動(dòng)畫應(yīng)該播放的次數(shù)。默認(rèn)1，也可以是infinite無限次 |
| animation-direction | 規(guī)定是否應(yīng)該輪流反向播放動(dòng)畫。值為nomal\reverse\alternate\alternate-reverse。意思分別是正方向\反方向\往返\反方向的往返。 |
| animation-fill-mode | 規(guī)定動(dòng)畫開始的時(shí)候是否要保持開始的第一幀，結(jié)束是否保持最后一幀。其值為none\backwards\forwards\both。分別意思是不保持，開始保持，結(jié)束保持，和都保持。通常情況下是both設(shè)置。 |
| animation-play-state | 規(guī)定動(dòng)畫暫停還是播放，值為paused\running。一般搭配鼠標(biāo)hover時(shí)候使用，比如鼠標(biāo)移上去就動(dòng)了的效果，就設(shè)置running。 |
（1）語(yǔ)法
animation:none;
animation:abc 2s ease 0s 1 nomal none running;
animation:abc 2s;
animation:abc 1s 2s both,abcd 2s both;
其中abc就是keyframe名稱。keyframe是什么呢？我們把他叫做“關(guān)鍵幀”，玩過flash的朋友可能對(duì)這東西不會(huì)陌生。前面我們?cè)谑褂胻ransition制作transition過渡效果時(shí)，就包括了初始屬性和最終屬性，一個(gè)開始執(zhí)行動(dòng)作時(shí)間和一個(gè)延續(xù)動(dòng)作時(shí)間以及動(dòng)作的變換速率。
如果我們要控制的更細(xì)一些，比如要第一個(gè)時(shí)間段執(zhí)行什么動(dòng)作，第二個(gè)時(shí)間段執(zhí)行什么動(dòng)作，換到flash中說，就是第一幀執(zhí)行什么動(dòng)作，第二幀執(zhí)行什么動(dòng)作，這樣用Transition就很難實(shí)現(xiàn)了，此時(shí)我們也需要這樣的一個(gè)“關(guān)鍵幀”來控制。CSS3的Animation就是由“keyframes”這個(gè)屬性來實(shí)現(xiàn)這樣的效果。
如何定義keyframe的名稱呢？有兩種寫法：
@keyframes abc{
from{opacity:1;height:100px;}
to{opacity:0.5;height:200px;}
}
@keyframes abc{
0%{opacity:1;height:100px;}
50%{opacity:0.8;height:200px;}
100%{opacity:0.5;height:300px;}
}
分別是定義開始的狀態(tài)屬性參數(shù)，定義中間的狀態(tài)屬性參數(shù)，和定義結(jié)束時(shí)候的狀態(tài)屬性參數(shù)。當(dāng)然如果屬性參數(shù)是一樣的，我們可以組合起來寫，看下面：
@keyframes flash{
0%,50%,100%{opacity:1;}
25%,75%{opacity:0;}
}
定義了keyframes名稱用來干嘛呢，就是下面的用處了，把 "keyframes名稱" 捆綁到元素中去，比如div。
div {
animation:abc 0.5s both;
animation:flash 0.5s both;
animation:abc 0.5s both,flash 0.5s both;
}
Animation可以綜合寫一行，把所有的表格中的屬性按照表格里上下的順序?qū)懀部梢苑珠_Animation的每個(gè)屬性分開單獨(dú)寫。
（2）實(shí)例
.tools_iicon:hover{animation:rotate360 2s;}
@keyframes rotate360{
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}
后記：這是原文地址《CSS3新特性(03)：Animation》，歡迎來我個(gè)人博客逛逛！
