核心要點

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

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

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

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

fill-mode 的語法

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

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

當(dāng)然，這同一行簡寫可以擴展為：

.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 屬性都在最後定義，並且在這兩種情況下，值都設(shè)置為“forwards”。我們不必將其定義在最後，但這可能是一個很好的實踐。

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

fill-mode 的規(guī)範(fàn)定義

那麼規(guī)範(fàn)對這個屬性怎麼說呢？

animation-fill-mode 屬性定義了在動畫執(zhí)行時間之外應(yīng)用哪些值。

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

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

分解值

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

值：none

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

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

[CodePen 演示鏈接 (請?zhí)鎿Q為實際鏈接)]

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

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

值：forwards

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

[CodePen 演示鏈接 (請?zhí)鎿Q為實際鏈接)]

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

值：backwards

讓我們將值更改為 backwards——現(xiàn)在會發(fā)生什麼？

[CodePen 演示鏈接 (請?zhí)鎿Q為實際鏈接)]

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

與 forwards 相反，backwards 值在動畫結(jié)束後會為元素提供它在動畫開始之前的樣式。當(dāng)我們看到規(guī)範(fàn)對 backwards 值的說明時，這更有意義：

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

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

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

它在這裡：

[CodePen 演示鏈接 (請?zhí)鎿Q為實際鏈接)]

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

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

值：both

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

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

[CodePen 演示鏈接 (請?zhí)鎿Q為實際鏈接)]

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

一些注意事項和技巧

基於以上內(nèi)容以及規(guī)範(fàn)中的一些細節(jié)，以下是一些需要注意的事項：

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

結(jié)論

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

關(guān)於 CSS 動畫填充模式屬性的常見問題解答

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

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

animation-fill-mode 中的 forwards 值是如何工作的？

CSS animation-fill-mode 屬性中的 forwards 值確保元素保留動畫過程中遇到的最後一個關(guān)鍵幀設(shè)置的計算值。這意味著動畫結(jié)束後，最後一個關(guān)鍵幀中定義的樣式將保留在元素上，而不是恢復(fù)到原始樣式。

你能解釋 animation-fill-mode 中的 backwards 值嗎？

CSS animation-fill-mode 屬性中的 backwards 值在動畫開始之前的期間將第一個關(guān)鍵幀的樣式應(yīng)用於元素。這意味著如果動畫開始前有延遲，則元素將在該延遲期間採用第一個關(guān)鍵幀中定義的樣式。

animation-fill-mode 中的 both 值是什麼意思？

CSS animation-fill-mode 屬性中的 both 值結(jié)合了 forwards 和 backwards 的效果。這意味著在動畫開始前應(yīng)用第一個關(guān)鍵幀的樣式，並在動畫結(jié)束後保留最後一個關(guān)鍵幀的樣式。

當(dāng) animation-fill-mode 屬性設(shè)置為 none 時會發(fā)生什麼？

當(dāng) CSS animation-fill-mode 屬性設(shè)置為 none 時，動畫在開始之前或結(jié)束之後不會將任何樣式應(yīng)用於元素。元素僅在動畫積極運行期間受動畫影響。

我可以為 animation-fill-mode 屬性使用多個值嗎？

不可以，CSS animation-fill-mode 屬性一次只能取一個值。您可以根據(jù)動畫的具體要求從 none、forwards、backwards 或 both 中選擇。

所有瀏覽器都支持 animation-fill-mode 屬性嗎？

CSS animation-fill-mode 屬性在所有現(xiàn)代瀏覽器中都得到廣泛支持，包括 Chrome、Firefox、Safari 和 Edge。但是，它在 Internet Explorer 中不受支持。

animation-fill-mode 屬性如何與 animation-delay 屬性交互？

CSS animation-fill-mode 屬性與 animation-delay 屬性一起工作。如果 animation-fill-mode 設(shè)置為 backwards 或 both，並且存在 animation-delay，則將在延遲期間應(yīng)用第一個關(guān)鍵幀的樣式。

animation-fill-mode 屬性可以與具有百分比值的關(guān)鍵幀一起使用嗎？

可以，CSS animation-fill-mode 屬性可以與具有百分比值的關(guān)鍵幀一起使用。 forwards 和 backwards 值將分別應(yīng)用最接近 0% 和 100% 的關(guān)鍵幀的樣式。

animation-fill-mode 屬性的默認(rèn)值是什麼？

CSS animation-fill-mode 屬性的默認(rèn)值為 none。這意味著默認(rèn)情況下，動畫在開始之前或結(jié)束之後不會將任何樣式應(yīng)用於元素。

請注意，我已將 CodePen 鏈接替換為佔位符。你需要提供實際的 CodePen 演示鏈接才能使文章完整。

以上是了解CSS動畫填充模式屬性的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！