[CSS Animation] 7. 使用 animation-fill-mode 設定當動畫「開始之前」或「結束之後」的狀態

一般來說，動畫在結束時(執行到 100%)，會跳回至最初始的狀態；以及若有設定延遲時間的話，則元素的動態效果並不會套用到 0% 的狀態。有時這樣會導致有跳的奇怪現象。可以透過 animation-fill-mode ，我們可以決定該動畫效果在「開始之前」是否要套用 0% 時的狀態；動畫「結束之後」，是否要停留在結束時的狀態，即 100%。

此此文章同步於 字媒體部落格。

forwards 範例

以下建立了一個簡單的改變顏色的動畫效果(背景紅色轉變成背景藍色)，兩個 div 區塊，都套用了相同的 CSS，唯一的差別，只有在第二個 div 區塊，加上了 animation-fill-mode: forwards; 的效果，會發現，最後的結束狀態，停留在 100% 時的樣式上(也就是背景藍色)。

然而，第一個 div 的動畫效果(未套用 animation-fill-mode)，在執行完動畫效果後，會直接「跳」回至初始的狀態(也就是沒有背景色)。

也可以搭配 animation-iteration-count 及 animation-direction 一起使用，將 animation-fill-mode 設定為 forwards ，都會停留在動畫最後的結束狀態。

backwards 範例

然後，相反的，假設某元素套用了一個動畫後(背景紅色轉變成背景藍色)，有設定延遲時間(animation-delay)才執行，可以藉由設定 animation-fill-mode: backwards; 也可以讓元素一開始就套用 from 或 0% 的狀態。

both：同時套用 forwards 和 backwards

如果想要同時套用 forwards 和 backwards 的話，那就將 animation-fill-mode 設定成 both 即可：

animation-fill-mode: both;