H5學習筆記之CSS3 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。
每個參數也可以單獨寫，最後用的時候記得加瀏覽器前綴：
.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;}