HTML中的觸發動畫和主動動畫
觸發式動畫
常用觸發動作
1：鼠標懸浮（：hover）
2：選項選中（：checked）
3：輸入框點擊（：active）
… …
觸發式(過渡)動畫原理之動畫參數
過渡動畫時間：transition-duration。
定義一個動畫從第一幀到最後一幀的動畫時間，瀏覽器會根據該時間生成對應數量的中間幀數
例：
1：transition-duration:0.5s; 幀數=0.5s60幀/s=30幀
2：transition-duration:5s; 幀數=5s60幀/s=300幀
過渡動畫延遲：transition-delay
定義動畫從觸發動作執行的一瞬間，延遲多長時間開始展示動畫，默認延遲爲0，即動作一執行立馬就展示動畫
例：
1：transition-delay：1s; 那麼動畫會在動作執行的1s後開始執行
過渡動畫時間函數： transition-timing-function
定義動畫從第一幀到最後一幀變化過程的速率變化
注:貝塞爾曲線 http://cubic-bezier.com
過渡動畫屬性： transition- property
定義元素是以某個屬性的變化作爲動畫的變化效果(如,寬度的變化, 高度的變化等), 第一幀和最後一幀代表的就是該屬性的值的變化(比如width的值從第一幀的100px,到最後一幀的500px)
複合寫法：過渡動畫綜合屬性：屬性名稱 過渡時間 過度動畫時間函數 動畫延遲時間;
定義元素是以某個屬性的變化作爲動畫的變化效果(如,寬度的變化, 高度的變化等), 第一幀和最後一幀代表的就是該屬性的值的變化。
主動式動畫
**主動式動畫：**由用戶自行創造關鍵幀，無需任何的動作觸發，與觸發式動畫的不同：用戶可以自行創造多個關鍵幀，用來更加精細化的控制動畫的整個過程
**動畫激活：**給需要展示用戶自行創造的主動式動畫的元素加上animation-name（動畫-名稱）樣式
主動式動畫名稱：animation-name:;
@keyframes onepiece{}/* 創造了名爲onepiece的動畫 */
div.animte{
animation-name:onepiece;/將該動畫賦予給div元素展示/
}
主動式動畫時間定義一個動畫從第一幀到最後一幀的動畫時間，瀏覽器會根據該時間生成對應數量的中間幀數：animation-duration
主動式動畫時間函數： animation-timing-function
時間函數：定義動畫從第一幀到最後一幀變化過程的速率變化（參照貝塞爾曲線）
主動式動畫時間延遲： animation-delay
定義動畫從觸發動作執行的一瞬間，延遲多長時間開始展示動畫，默認延遲爲0，即動作一執行立馬就展示動畫
主動式動畫播放次數： animation-iteration-count
規定動畫被播放的次數。默認是 1。
infinite:無限循環 。
主動動畫原理之多次播放動畫時的的正反方向
animation-direction：規定動畫是否在下一週期逆向地播放。
默認是 “normal”,每一次都是正向播放
revers爲負方向。
複合寫法：
animation: name duration timing-function delay iteration-count direction
動畫：名稱 時長 時間函數 延遲 次數 方向