一、概述
CSS3的animation屬性可以像flash制作動畫一樣，通過關鍵幀控制動畫的每一步，實現更為復雜的動畫效果。使用方法：
1）利用@keyframes聲明一個關鍵幀組。
2）在animation屬性中調用上述聲明的的關鍵幀組，來實現動畫。
二、瀏覽器兼容性
為了最大限度的兼容各個瀏覽器，在使用此屬性時需要加上瀏覽器的前綴。例如，可以這樣：
三、animation屬性的值：
1）animation-name：指定一個關鍵幀動畫的名字，由@keyframes聲明。
當值為none時（默認值），將沒有任何動畫效果，其可以用於覆蓋任何動畫。
2）animation-duration：動畫持續時間，單位為s或ms，一般使用秒
3）animation-timing-function：動畫的播放方式函數：linear、ease-in等
4）animation-delay：動畫開始之前的延遲時間
5）animation-iteration-count：指定動畫的循環次數
取值一般為整數，默認值為1，即只播放一次，如果取值為infinite，動畫將會無限次地播放。
6）animation-direction：動畫的播放方向。
默認值為normal，即動畫每次循環都向前播放，取值為alternate時，動畫播放為偶數次則向前播放，為奇數次則反方向播放，例如一個反復的彈跳動畫。。。
7）animation-play-state：用來控制動畫的播放狀態。
主要值有兩個：running和paused。running為默認值，可以通過paused將正在播放的動畫停止，可以通過running將暫停的動畫播放。
8）animation-fill-mode：用來設置動畫的時間外屬性
其用四個值：none、forwards、backwards和both。
默認值為none，表示動畫正常開始，結束后樣式回到初始樣式（animation屬性之外的樣式）
取值為forwars時，動畫結束后，樣式保持為最后一幀的樣式（100%時）。
取值為backwards時，當有delay屬性時，可以迅速將第一幀的樣式應用到動畫元素，而不是開始動畫時才將第一幀的樣式應用到動畫元素，當然，delay為0時看不出效果。
取值為both時，讓動畫元素同時有forwards和backws兩種屬性效果。
注：當然，這八個屬性可以分開寫，也可以合並寫並用空格隔開。
四、@keyframes使用方式：
中間的省略號表示一個數字，可以任意指定n個。