CSS動畫之動畫模塊
阿新 • • 發佈：2018-03-17
pos key 時長 pan none cti 運動 delay charset
過渡模塊和動畫模塊的區別：過渡動畫需要人為的去觸發這個反應，而動畫模塊不需要人為
相同點：都是動畫；都是系統新增的屬性；都是要滿足三要素才有動畫效果
三要素：1.告訴系統執行哪個動畫，要寫出動畫名稱；animation-name:名稱;
2.告訴系統我們需要創建一個名稱的動畫； @keyframes 名稱 {
from{
}
to{
}
}
3.告訴系統動畫持續時長; animation-duration:動畫持續時間;
其他屬性：動畫運動的速度：animation-timing-function：（linear-線性...）；
動畫延遲多少秒執行：animation-delay：秒數；
動畫執行次數：animation-iteration-count：次數；
動畫是否輪流反向播放：animation-direction：alternate（輪流反向播放）normal（正常播放，默認取值）；
控制動畫的發生和靜止：animation-play-state：running（動畫正在播放，默認取值）paused（動畫靜止）；
註意點：第二種方式制作動畫不用from-to用百分比，好處可以設置任意多的節點
0%{
}
50%{
}
100%{
}
動畫是有一定的狀態的：1.等待狀態；2.執行狀態；3.結束狀態；
animation-fill-mode（動畫等待和結束狀態的樣式）：none（不做任何改變）
backwards（動畫第一幀的狀態）
forwards（動畫最後一幀的狀態）
both(動畫從第一幀的樣式開始最後停留在最後一幀)
動畫模塊的連寫：animation：動畫名稱 動畫時長 動畫運動速度 延遲時間 執行次數 往返動畫；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>動畫模塊</title> <style> @keyframes { } div{ animation-duration: ; } </style> </head> <body> <div></div></body> </html>
CSS動畫之動畫模塊