深入了解animation-fill-mode

animation-fill-mode是CSS3中非常有用的一個動畫屬性，它可以定義動畫執行前和執行後的元素樣式。

一、使用animation-fill-mode的好處

1.1 可以使動畫過程中元素樣式不受其他樣式影響

默認情況下，動畫執行前和執行後元素的樣式可能會受其他樣式的影響。例如，你可能有一個按鈕，上面有一個背景顏色和一個hover狀態的不同顏色。在動畫開始之前，按鈕可能處於hover狀態，這可能會破壞動畫的視覺效果。
使用animation-fill-mode可以解決這個問題。在動畫開始之前，你可以設置元素的初始狀態，以避免其他樣式影響動畫過程。

1.2 可以保留動畫執行結束後的狀態

默認情況下，當動畫執行結束後，元素會回到其原始狀態。例如，你有一個簡單的漸變動畫，它從不透明到透明。在默認情況下，動畫完成後，元素將回到完全透明的狀態。但是使用animation-fill-mode，可以讓元素保持漸變結束後的狀態。

二、animation-fill-mode屬性的值

animation-fill-mode屬性有4個值：none、forwards、backwards和both。

1. none

默認值，定義了元素在不執行動畫時的狀態。動畫執行時，元素將從該狀態開始，並結束為動畫執行完後的狀態。

2. forwards

動畫執行結束後，元素將處於動畫執行後的狀態，如果要取消動畫效果，則需要手動將元素的樣式更改為不同的元素狀態。

3. backwards

動畫執行前，元素將處於動畫執行前的狀態，即在開始執行動畫之前，元素將擁有從第一個關鍵幀到它自己之前的所有關鍵幀的動畫屬性值。

4. both

這個值同時包含forwards和backwards的效果，元素將根據在動畫執行前和執行後的狀態都保留。

三、示例代碼

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: animate 2s ease-in-out 1s forwards;
}

@keyframes animate {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.box-2 {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: animate-2 2s ease-in-out 1s both;
}

@keyframes animate-2 {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

四、結論

animation-fill-mode能夠幫助我們掌控動畫的執行前和執行後的狀態，以達到更好的視覺效果。合理地設置animation-fill-mode的值，可以使我們的動畫更加自然流暢。