動畫的製作：
1.用戶需要定義第一幀和最後一幀的，中間的幀數由計算機輔助生成；
2.用戶定義第一幀到最後一幀的動畫時間(根據此事件計算機算出具體需要幫我們生成的幀數)
觸發式動畫：
1.觸發條件:hover(鼠標懸浮)，:checked(選項選中), :active(輸入框點擊)
元素默認的狀態賦予動畫的第一幀，觸發動作賦予元素動畫的最後一幀；
2.動畫執行得時間：transition-duration:2s；
幀數=2s*60幀/s=120幀；
3.transition-delay:3s;動畫延遲執行；
4.類似於display：none；display：block;是一個元素的出現和消失，所以無法設置動畫。
只有數字參與的參數才能夠設置動畫；
動畫時間參數：
1.過渡動畫時間函數：transition-timing-function 定義動畫從第一幀到最後一幀變化過程的速率變化;
2.與設置動畫時間不一樣，transition-duration決定的是動畫幀數，transition-timing-function決定的是兩幀之間的變化速率；
3.默認值ease(慢-快-慢):transition-timing-function:ease;
勻速：linera;
慢速結束：ease-out;
慢速開始：ease-in;
慢速開始和結束：ease-in-out;
貝塞爾曲線：cubic-bezier(.33,.1,77,.36,-1.81);
ease的貝塞爾曲線：cubic-bezier(0.25,1.01,0.25,0.1) ;
動畫效果消失屬性：
transition-property:none;
peoperty:參與動畫的屬性名，多個屬性用逗號隔開(也就是觸發元素裏面進行動畫的屬性)
例:proerty：width(寬實現動畫)/height(高實現動畫)/all(觸發元素中的全部屬性都實現動畫);
複合屬性寫法：
1.transition:propety duration timing-function delay
過渡動畫：屬性名 動畫時長 時間函數 延遲時間；
2.動畫一般寫在元素樣式裏面，不寫在hover中，寫在hover中只有出現hover中樣式的時候纔會出現樣式。
二級菜單：
主動式動畫：
動畫的創造：
@keyframes 動畫名稱{
0%（狀態1）{
width:500px;
height:100px;
}
50%（狀態2）{background-color:}
100%(狀態3){
width:300px;
height:300px;
background-color:
}
}
0%動畫開始位置，可以不是元素的初始位置；
**動畫和元素的關聯（元素內加屬性）：**動畫名稱：animation-name：（這裏的動畫名稱要與自動設置動畫的動畫名稱相同）
**動畫時長：**animation-duation:5s；(時間必須寫在實現動畫元素的的裏面，不能寫在自行創造關鍵幀的轉態裏面效果是沒有的)
**動畫次數：**animation-iteration-count:3/infinite(循環);(每次開始默認爲0%的狀態)
**貝塞爾函數：**animation-timing-function:cubic -bezier(.35,.3,2.4,-5.6);
**動畫延遲：**animation-delay:2s;
動畫是否正反向執行：
animation-direction：normal;(默認值,正常執行);
reverse;反向執行；
alternate:(正反向切換執行，動畫看起來更連貫)；
alternate-reverse:反正向切換執行；
複合寫法：
animation:name duration timing-function delay iteration-count direction;
動畫：名稱 時長 時間函數 延遲 次數 方向
動畫循環播放最後停止的狀態：
animation-fill-mode:backwards;(保留第一幀,動畫初始的樣式)
forwards;(保留最後一幀)
both(自適應)
觸發式主動動畫的暫停和播放：
:hover{
animation-play-statre:paused;(動畫在播放時鼠標f放入時暫停)
animation-play-state:running;(動畫在播放時點擊播放)}