核心要點(diǎn)

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

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

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

這是唯一一個(gè)不太容易理解的基於動(dòng)畫(huà)的屬性。例如，沒(méi)有人會(huì)對(duì) animation-name、animation-duration 等感到困惑……但是，“填充模式”到底是什麼意思呢？讓我們簡(jiǎn)要地考慮一下，並舉一些例子。

fill-mode 的語(yǔ)法

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

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

當(dāng)然，這同一行簡(jiǎn)寫(xiě)可以擴(kuò)展為：

.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;
}

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

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

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

那麼規(guī)範(fàn)對(duì)這個(gè)屬性怎麼說(shuō)呢？

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

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

讓我們通過(guò)查看每個(gè)可能的值來(lái)擴(kuò)展這個(gè)基本的定義（這可能仍然有點(diǎn)令人困惑）。

分解值

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

值：none

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

要了解 none 值的作用，這裡有一個(gè) CodePen 演示，其中顯示了一個(gè)沒(méi)有定義 animation-fill-mode 的動(dòng)畫(huà)（因此，它的值為 none）：

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

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

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

值：forwards

讓我們將球的動(dòng)畫(huà)更改為 fill-mode 值為“forwards”：

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

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

值：backwards

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

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

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

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

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

為了演示這一點(diǎn)，我對(duì)演示進(jìn)行了兩處修改：

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

它在這裡：

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

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

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

值：both

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

讓我們?cè)谘菔局斜Ａ粝嗤臉邮?，看看?dāng)我們賦予它 both 值時(shí)會(huì)發(fā)生什麼：

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

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

一些注意事項(xiàng)和技巧

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

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

結(jié)論

我希望這篇總結(jié)能幫助您更好地理解此屬性。一些研究確實(shí)幫助我更好地理解了它。如果您對(duì) animation-fill-mode 做了一些獨(dú)特的事情，或者對(duì)不同值有任何獨(dú)特的用例，或者對(duì)本文有任何更正，請(qǐng)?jiān)谟懻撝懈嬖V我們。

關(guān)於 CSS 動(dòng)畫(huà)填充模式屬性的常見(jiàn)問(wèn)題解答

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

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

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

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

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

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

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

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

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

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

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

不可以，CSS animation-fill-mode 屬性一次只能取一個(gè)值。您可以根據(jù)動(dòng)畫(huà)的具體要求從 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)用第一個(gè)關(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)情況下，動(dòng)畫(huà)在開(kāi)始之前或結(jié)束之後不會(huì)將任何樣式應(yīng)用於元素。

請(qǐng)注意，我已將 CodePen 鏈接替換為佔(zhàn)位符。你需要提供實(shí)際的 CodePen 演示鏈接才能使文章完整。

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