css3動畫（@keyframes和animation的用法）

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; }