animation-fill-mode 屬性規定動畫在播放之前或之后，其動畫效果是否可見。
| none | 不改變默認行為。 |
| forwards | 當動畫完成后，保持最后一個屬性值（在最后一個關鍵幀中定義）。 |
| backwards | 在 animation-delay 所指定的一段時間內，在動畫顯示之前，應用開始屬性值（在第一個關鍵幀中定義）。 |
| both | 向前和向后填充模式都被應用。 |
關於這三個，很好理解；具體請看demo
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href=""> <style> *{margin: 0; padding: 0;} .box{width: 100px; height: 100px; background: red; border-radius: 50%; opacity: 0.5; animation: paly 2s linear backwards } @keyframes paly{ 0%{-webkit-transform: scale(0.5,0.5); -ms-transform: scale(0.5,0.5); -o-transform: scale(0.5,0.5); transform: scale(0.5,0.5);} 100%{ -webkit-transform:scale(0,0); -ms-transform:scale(0,0); -o-transform:scale(0,0); transform:scale(0,0); } } </style> </head> <body> <div class="box"></div> </body> </html>
這是一個大小勻速變化的圓，當animation的填充模式為backwards的時候，可以看到，小圓縮小后直至沒有了，說明保持了最后一幀；當animation的填充模式為forwards的時候，則相反；當animation的填充模式為both的時候，第一幀和最后一幀都保留；