animation-fill-mode 示範與比較

這裡展示了 animation-fill-mode 的四種不同值的效果：

none

backwards

forwards

both

屬性值	動畫開始前	動畫進行中	動畫結束後
`none`	不受動畫影響（維持原本的 CSS 樣式）。	根據 `@keyframes` 執行動畫。	回到原本的 CSS 樣式（動畫不影響結束後的狀態）。
`backwards`	應用動畫的第一幀 (`0%` 或 `from`)（只在 `animation-delay` 期間生效）。	根據 `@keyframes` 執行動畫。	回到原本的 CSS 樣式（動畫不影響結束後的狀態）。
`forwards`	不受動畫影響（維持原本的 CSS 樣式）。	根據 `@keyframes` 執行動畫。	保持動畫的最後一幀 (`100%` 或 `to`) 的樣式，不回復原本 CSS 樣式。
`both`	應用動畫的第一幀 (`0%` 或 `from`)（只在 `animation-delay` 期間生效）。	根據 `@keyframes` 執行動畫。	保持動畫的最後一幀 (`100%` 或 `to`) 的樣式，不回復原本 CSS 樣式。