animation基本用法是：
animation: name keeping-time animate-function delay times iteration final;第一個參數：name (animation-name)：
動畫的名字，即設定動畫過程的名字，CSS3采用“關鍵幀 keyframes”來定義動畫，方式形如：
@-webkit-keyframes name{ 0%{ opacity: 0; } 100%{ opacity: 1; } }前綴-webkit-表示webkit內核瀏覽器（Chrome、Safari和變心的opera），以上代碼定義了一個動畫，名叫name，效果是使透明度從0變化到1,0%~100%為整個過程，當然也可以定義多段如：0%~20~50%~100%。
第二個參數：keeping-time (animation-duration)：
整個動畫的持續時間，必須帶上時間單位，s或者ms均可；
第三個參數：animate-function (animation-timing-function)：
運動方式（動畫方式）的貝賽爾曲線，可取值為：ease、ease-in、ease-out、linear、ease-in-out、cubic-bezier(num1,num2,num3,num4)。
第四個參數：delay (animation-delay)：
動畫延遲執行的時間，單位也是s或者ms，值得注意的是，即使延遲時間為0，也必須加上時間單位，如果寫成直接寫成0，在Chrome和Safari(webkit)下是沒問題的，但是在FF(gecko)下無效。
第五個參數：times (animation-iteration-count)：
動畫循環執行的次數，無單位，infinite為無限循環。
第六個參數：iteration (animation-direction)：
如果動畫循環，循環的方式是：alternate(偶數次向前播放，奇數次向后播放)、normal(每次都向前播放)。
第七個參數：final (animation-fill-mode)：
動畫的最后（達到100%）時的狀態，取值有：backward（回到初始狀態）、forwards（停在最終狀態）、none、both。
| 屬性值 | 效果 |
| none |
默認值，表示動畫將按預期進行和結束，在動畫完成其最后一幀時，動畫會反轉到初始幀處 |
| forwards |
表示動畫在結束后繼續應用最后的關鍵幀的位置 |
| backwards |
會在向元素應用動畫樣式時迅速應用動畫的初始幀 |
| both |
元素動畫同時具有forwards和backwards效果 |
每個參數也可以單獨寫，最后用的時候記得加瀏覽器前綴：
.classname{ -webkit-animation:name 6s linear 0ms infinite normal forwards; -moz-animation:name 6s linear 0ms infinite normal forwards; -o-animation:name 6s linear 0ms infinite normal forwards; animation:name 6s linear 0ms infinite normal forwards; }