css3新增了一個好玩的屬性：animation，雖然用它做出來的動畫并沒有多么炫酷流暢，但是它減少了代碼量并且在瀏覽器性能上有著明顯的有點。
animation基本用法是：
animation:name keeping-time animate-function delay times iteration final
/////////注：animation是復合屬性，它可以合著用也可以分開寫。
第一個參數：name
動畫的名字，css3用‘keyframes 關鍵幀’來定義動畫
例子：
@-webkit-keyframes name{
0%{top:0;}
100%{top:10px;}
}
前綴-webkit-表示webkit內核瀏覽器（Chrome、Safari和opera），上面代碼定義了一個動畫，名子叫name，效果是使高度從0變化到10,0%~100%為整個過程，也可以定義多段如：0%~20~50%~100%。
第二個參數：animation-duration：
整個動畫的持續時間，必須帶上時間單位，s或者ms均可；
第三個參數：animation-timing-function：
運動方式（動畫方式）的貝賽爾曲線,它的值有：
linear：線性過渡。
ease：平滑過渡。
ease-in：由慢到快。
ease-out：由快到慢。
ease-in-out：由慢到快再到慢。
等。
第四個參數：animation-delay：
動畫延遲執行的時間，單位也是s或者ms，值得注意的是，即使延遲時間為0，也必須加上時間單位，如果寫成直接寫成0，在Chrome和Safari(webkit)下是沒問題的，但是在FF(gecko)下無效。
例子：
animation-delay:0.5s;? ? 動畫開始前延遲的時間為0.5s
第五個參數：times (animation-iteration-count)：
動畫循環執行的次數，無單位，infinite為無限循環。
infinite：無限循環
number: 循環的次數
例子：
animation-iteration-count: infinite | number;
第六個參數：animation-direction：
normal：正常方向
reverse：反方向運行
alternate：動畫先正常運行再反方向運行，并持續交替運行
alternate-reverse：動畫先反運行再正方向運行，并持續交替運行
如果動畫循環，循環的方式是：alternate(偶數次向前播放，奇數次向后播放)、normal(每次都向前播放)。
第七個參數：animation-fill-mode：
動畫的最后（達到100%）時的狀態，取值有：backward（回到初始狀態）、forwards（停在最終狀態）、none、both。
每個參數也可以單獨寫，最后用的時候記得加瀏覽器前綴。
例：
.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;}
將不帶前綴的寫在最后面好處是等到animation被所有瀏覽器認可，可以擯棄前綴的時候可以覆蓋前面的樣式。
第八個參數：animation-play-state? 檢索或設置對象動畫的狀態
animation-play-state:running | paused;
running:運動
paused: 暫停
animation-play-state:paused; ? ? ? 當鼠標經過時動畫停止，鼠標移開動畫繼續執行
