了解CSS动画填充模式属性-css教程-PHP中文网

首页

web前端

css教程

了解CSS动画填充模式属性

Lisa Kudrow

Feb 25, 2025 am 08:48 AM

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