CSS3<1>:animation-fill-mode
阿新 • • 發佈:2018-12-19
引言:雖是前端,但是卻不注重CSS,因為我只喜歡寫JavaScript,誰知CSS3悄悄推出這麼多屬性,只能有時間就瞭解一個
1、animation簡寫語法:
animation: name(動畫名稱) duration(動畫時長,單位s) timing-function(動畫曲線) delay(動畫延時) iteration-count(動畫播放次數) direction(是否輪流反向播放動畫);
eg.
(1)、動畫run,播放時長10s,播放一次,animation: run 10s 1;
(2)、動畫run,播放時長10s,延時2秒,播放一次,animation: run 10s 2s 1;
(3)、動畫run,播放時長10s,延時2秒,播放一次,animation: run 10s 2s;
預設播放一次。。
2、正題,animation-fill-mode,盡在註釋中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>animation-fill-mode</title> <style> @keyframes run { from { background: red; } to { background: blue; } } ul li { animation: run 10s 2s 1; /* delay設定為2s,以看到backwards的效果 */ margin-bottom: 10px; } .none { animation-fill-mode: none; /* 預設行為,動畫結束樣式不保留 */ } .forwards { animation-fill-mode: forwards; /* 代表,動畫結束保留樣式 */ } .backwards { animation-fill-mode: backwards; /* 代表,動畫開始時,先應用動畫的第一幀,在animation定義delay屬性的時候可以看到效果, 動畫結束樣式不保留 */ } .both { animation-fill-mode: both; /* 代表,設定了forwards和backwards,動畫結束樣式保留*/ } </style> </head> <body> <h1> animation-fill-mode : none | forwards | backwards | both; </h1> <ul> <li class="none">none</li> <li class="forwards">forwards</li> <li class="backwards">backwards</li> <li class="both">both</li> </ul> </body> </html>