CSS3<1>：animation-fill-mode，填充模式
阿新 • • 發佈：2018-11-07
引言：雖是前端，但是卻不注重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>