了解CSS動畫填充模式屬性-css教學-PHP中文網

Understanding the CSS animation-fill-mode Property

核心要點

CSS animation-fill-mode 屬性控制動畫在執行前後如何應用樣式，它有四個可能的值：none、forwards、backwards 和 both。
forwards 值確保動畫結束後，動畫最後一個關鍵幀中定義的樣式會保留在元素上，而不是恢復到原始樣式。
backwards 值在動畫開始之前的任何延遲期間，將第一個關鍵幀的樣式應用於元素。
both 值結合了 forwards 和 backwards 的效果，在動畫開始前應用第一個關鍵幀的樣式，並在動畫結束後保留最後一個關鍵幀的樣式。

前端開發人員幾乎都使用過基於 CSS 關鍵幀的動畫。一些人甚至可能用此功能創建了一些相當複雜的演示和實驗。

如果您需要對該主題進行全面介紹，我在 Smashing Magazine 上 2011 年發表的文章仍然是一個不錯的選擇。然而，在本文中，我想關注 CSS 動畫規範的一個組成部分：animation-fill-mode 屬性。

這是唯一一個不太容易理解的基於動畫的屬性。例如，沒有人會對 animation-name、animation-duration 等感到困惑……但是，“填充模式”到底是什麼意思呢？讓我們簡要地考慮一下，並舉一些例子。

fill-mode 的語法

您可能已經知道，基本的關鍵幀動畫是使用 @keyframes 規則定義的。但是，除非您將關鍵幀與動畫名稱關聯起來，否則關鍵幀不會起作用。這是一個簡寫動畫屬性聲明，您可以了解我的意思：

.example {
  animation: myAnim 2s 500ms 2 normal ease-in forwards;
}

登入後複製

當然，這同一行簡寫可以擴展為：

.example {
  animation-name: myAnim;
  animation-duration: 2s;
  animation-delay: 500ms;
  animation-iteration-count: 2;
  animation-direction: normal;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}

登入後複製

在兩個示例中，animation-fill-mode 屬性都在最後定義，並且在這兩種情況下，值都設置為“forwards”。我們不必將其定義在最後，但這可能是一個很好的實踐。

同樣，即使您從未使用過 CSS 動畫，您也可能能夠弄清楚上面聲明中所有內容的作用——除了 animation-fill-mode。

fill-mode 的規範定義

那麼規範對這個屬性怎麼說呢？

animation-fill-mode 屬性定義了在動畫執行時間之外應用哪些值。

正如它繼續解釋的那樣，“執行時間之外”的時間具體是指動畫應用於元素的時間與元素實際開始動畫的時間之間的時間。基本上，使用 fill-mode 值，您可以定義動畫元素在動畫執行時間之外但動畫應用之後的外觀。聽起來可能令人困惑，但您很快就會明白我的意思。

讓我們通過查看每個可能的值來擴展這個基本的定義（這可能仍然有點令人困惑）。

分解值

animation-fill-mode 屬性可以接受四個值之一：none、forwards、backwards 或 both。以下是每個值的細分。

值：`none`

這是 animation-fill-mode 的初始值或默認值。除非您通過 JavaScript 設置它以將其從其他值更改，或者您正在覆蓋級聯中的某些內容，否則定義 none 值將是多餘的。

要了解 none 值的作用，這裡有一個 CodePen 演示，其中顯示了一個沒有定義 animation-fill-mode 的動畫（因此，它的值為 none）：

[CodePen 演示鏈接 (請替換為實際鏈接)]

您可以看到，在大多數情況下，none 的填充模式不是您想要的。請記住，fill-mode 定義了元素在動畫執行時間之外的外觀。

在這個示例中，球最初是紅色的，然後在同時向右移動和改變大小的同時逐漸變成粉紅色。如果動畫結束後，球保持較小、粉紅色且偏右，將會更好。這將避免動畫結束後難看的跳回起始狀態。

值：`forwards`

讓我們將球的動畫更改為 fill-mode 值為“forwards”：

[CodePen 演示鏈接 (請替換為實際鏈接)]

現在您可以看到使用 animation-fill-mode 的好處以及為什麼 forwards 值比其他任何值都使用得更多。當我們使用此值定義它時，我們告訴瀏覽器我們希望動畫元素保留其最終的樣式集，如最後一個關鍵幀中所定義的那樣。這樣，我們就不會在動畫結束後跳回元素開始動畫之前的初始狀態（我在演示中添加的“重置”按鈕可以為我們做到這一點）。

值：`backwards`

讓我們將值更改為 backwards——現在會發生什麼？

[CodePen 演示鏈接 (請替換為實際鏈接)]

請注意，此演示中的行為與第一個具有 animation-fill-mode 值為“none”的演示完全相同。為什麼會這樣？

與 forwards 相反，backwards 值在動畫結束後會為元素提供它在動畫開始之前的樣式。當我們看到規範對 backwards 值的說明時，這更有意義：

在 animation-delay 定義的期間，動畫將應用在將啟動動畫第一次迭代的關鍵幀中定義的屬性值。這些是 from 關鍵幀的值……或 to 關鍵幀的值。

為了演示這一點，我對演示進行了兩處修改：

添加了一個 from 關鍵幀，為球使用不同的顏色。
使用 animation-delay 屬性添加了延遲。

它在這裡：

[CodePen 演示鏈接 (請替換為實際鏈接)]

現在您可以看到，一旦您按下“啟動動畫”按鈕，球就會變成藍色。這是因為存在明顯的延遲。從技術上講，每個動畫都有一個默認延遲，但延遲為0s，因此在這種情況下您不會真正看到backwards 的值，如果您初始關鍵幀中的樣式與動畫開始之前的樣式相同，您當然也不會看到它。如果使用相同的樣式和相同的延遲，刪除 backwards 值會導致球在動畫開始之前保持紅色。

說實話，我並沒有真正看到 backwards 值的很多實際用途。很難想像太多情況下動畫的第一個關鍵幀中的樣式與元素動畫前的靜態狀態不同。但如果您有任何想法，我很樂意聽取一些用例。

值：`both`

我們將要查看的最後一個值是 both 值。此值告訴瀏覽器應用 forwards 和 backwards 的效果。

讓我們在演示中保留相同的樣式，看看當我們賦予它 both 值時會發生什麼：

[CodePen 演示鏈接 (請替換為實際鏈接)]

不是火箭科學。如您所見，在初始延遲期間，將應用初始關鍵幀樣式，然後動畫結束並凍結最後一個關鍵幀中的樣式（如前所述，這通常是您想要的）。同樣，如果不是因為延遲和在第一個關鍵幀中定義的替代顏色，此值與僅使用 forwards 不會有太大區別。

一些注意事項和技巧

基於以上內容以及規範中的一些細節，以下是一些需要注意的事項：

雖然我已經在某種程度上最小化了 backwards 和 both 值的重要性，但在由腳本或用戶輸入控制的複雜動畫中，這些值可能派上用場。用例將比比皆是（想想：遊戲），但只有通過實驗和創新才能實現。
在 animation-direction 屬性設置為 reverse 的情況下，forwards 和 backwards 值的效果會反轉。如果您擺弄演示，您將看到它是如何工作的。
雖然我說 animation-fill-mode 只接受四個值，但請記住，還可以使用 CSS 範圍屬性值。
在早期版本的規範中，animation-fill-mode 不是簡寫動畫屬性的一部分，但似乎所有支持關鍵幀的瀏覽器都可以將其用於簡寫。
使用動畫簡寫並為動畫選擇自定義名稱時，不要使用與有效fill-mode 值匹配的名稱（例如“reverse”或“forwards”），否則瀏覽器將解析簡寫聲明，假設該名稱實際上是一個fill-mode 值。

結論

我希望這篇總結能幫助您更好地理解此屬性。一些研究確實幫助我更好地理解了它。如果您對 animation-fill-mode 做了一些獨特的事情，或者對不同值有任何獨特的用例，或者對本文有任何更正，請在討論中告訴我們。

關於 CSS 動畫填充模式屬性的常見問題解答

CSS `animation-fill-mode` 屬性的意義是什麼？

CSS animation-fill-mode 屬性是 CSS 動畫的關鍵方面。它定義了動畫如何在執行前後應用樣式到其目標。此屬性有助於控制動畫過程中元素的中間狀態。它可以取四個值：none、forwards、backwards 和 both。每個值都決定了動畫在不同階段如何影響元素，從而為開發人員提供了對動畫的更大控制。