5.7 填滿模式 animation-fill-mode

animation-fill-mode 設明

動畫效果的播放期間，指的是從 0% ~ 100%，而 animation-fill-mode 是用來設定，當動畫效果未執行的時候(也就是 0% 之前的延遲期間，以及 100% 之後)，是否要保留 keyframe 是 0% 或 100% 時的 css。

• none：預設值。

• forwards：動畫播放結束後，仍保留最後 keyframe(即 100%) 的 css。

• backwards：動畫在延遲期間( animation-delay )，要停留在第一個 keyframe(即 0%) 的 css。

• both：同時套用 forwards 及 backwards 的特性。

範例

切換 animation-fill-mode 四種模式觀察看看：

在 div.effect 加上以下 css，再觀察 animation-fill-mode 各種模式：

animation-direction: reverse;