了解CSS动画填充模式属性

核心要点

• 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 规则定义的。但是，除非您将关键帧与动画名称关联起来，否则关键帧不会起作用。这是一个简写动画属性声明，您可以了解我的意思：

<code class="language-css">.example {
  animation: myAnim 2s 500ms 2 normal ease-in forwards;
}</code>

当然，这同一行简写可以扩展为：

<code class="language-css">.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;
}</code>

在两个示例中，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。每个值都决定了动画在不同阶段如何影响元素，从而为开发人员提供了对动画的更大控制。

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

CSS animation-fill-mode 属性中的 forwards 值确保元素保留动画过程中遇到的最后一个关键帧设置的计算值。这意味着动画结束后，最后一个关键帧中定义的样式将保留在元素上，而不是恢复到原始样式。

你能解释 animation-fill-mode 中的 backwards 值吗？

CSS animation-fill-mode 属性中的 backwards 值在动画开始之前的期间将第一个关键帧的样式应用于元素。这意味着如果动画开始前有延迟，则元素将在该延迟期间采用第一个关键帧中定义的样式。

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

CSS animation-fill-mode 属性中的 both 值结合了 forwards 和 backwards 的效果。这意味着在动画开始前应用第一个关键帧的样式，并在动画结束后保留最后一个关键帧的样式。

当 animation-fill-mode 属性设置为 none 时会发生什么？

当 CSS animation-fill-mode 属性设置为 none 时，动画在开始之前或结束之后不会将任何样式应用于元素。元素仅在动画积极运行期间受动画影响。

我可以为 animation-fill-mode 属性使用多个值吗？

不可以，CSS animation-fill-mode 属性一次只能取一个值。您可以根据动画的具体要求从 none、forwards、backwards 或 both 中选择。

所有浏览器都支持 animation-fill-mode 属性吗？

CSS animation-fill-mode 属性在所有现代浏览器中都得到广泛支持，包括 Chrome、Firefox、Safari 和 Edge。但是，它在 Internet Explorer 中不受支持。

animation-fill-mode 属性如何与 animation-delay 属性交互？

CSS animation-fill-mode 属性与 animation-delay 属性一起工作。如果 animation-fill-mode 设置为 backwards 或 both，并且存在 animation-delay，则将在延迟期间应用第一个关键帧的样式。

animation-fill-mode 属性可以与具有百分比值的关键帧一起使用吗？

可以，CSS animation-fill-mode 属性可以与具有百分比值的关键帧一起使用。forwards 和 backwards 值将分别应用最接近 0% 和 100% 的关键帧的样式。

animation-fill-mode 属性的默认值是什么？

CSS animation-fill-mode 属性的默认值为 none。这意味着默认情况下，动画在开始之前或结束之后不会将任何样式应用于元素。

请注意，我已将 CodePen 链接替换为占位符。你需要提供实际的 CodePen 演示链接才能使文章完整。

以上是了解CSS动画填充模式属性的详细内容。更多信息请关注PHP中文网其他相关文章！