再看 animation-fill-mode 属性

[FishPlusOrange]

在开发过程中，通过 @keyframes，我们多多少少都写过一些自定义 CSS3 动画。有时候动画虽小，但是极大提高了用户体验。所以在浏览器兼容性允许的情况下，我一般都会对 CSS3 动画有所考虑。

以前我写 CSS3 动画都是先定义一个 @keyframes，然后使用 animation 设置基础属性完成该动画。对于 animation 一些“冷门”属性没有太多了解，比如 animation-fill-mode，当初只是简单看了一下属性描述。所以，这里再看 animation-fill-mode 属性并进行简单的总结。

animation-fill-mode 属性是什么？MDN 上面是这样描述的：

The animation-fill-mode CSS property sets how a CSS animation applies styles to its target before and after its execution.

翻译过来就是，animation-fill-mode 这个 CSS 属性用来指定在动画执行之前和之后如何给动画的目标应用样式。

定义看起来比较抽象，先看一个例子：

HTML：

<div class="box"></div>

CSS：

.box {
  width: 100px;
  height: 100px;
  background: black;
  animation: move 2s;
}

@keyframes move {
  from {
    background: mediumseagreen;
    transform: translateX(0)
  }
  to {
    background: indianred;
    transform: translateX(50px)
  }
}

以上是一个很简单的例子：一个正方形在 X 轴平移，默认背景颜色为黑色，动画执行过程中背景颜色从绿色过渡到红色（为了方便观察）。其中，move 为自定义动画，animation 设置绑定到选择器的动画为 move 且完成动画所花费的时间为2秒。

animation-fill-mode 有四个值：

• none
• forwards
• backwards
• both

以上面的代码为基础，看看这四个值分别是什么效果。代码如下：

HTML：

<div class="box none"></div>
<div class="box forwards"></div>
<div class="box backwards"></div>
<div class="box both"></div>

CSS：

.box {
  width: 100px;
  height: 100px;
  background: black;
  margin-bottom: 10px;
  animation: move 2s;
  animation-delay: 1s;
}
.box.none {
  animation-fill-mode: none;
}
.box.forwards {
  animation-fill-mode: forwards;
}
.box.backwards {
  animation-fill-mode: backwards;
}
.box.both {
  animation-fill-mode: both;
}
@keyframes move {
  from {
    background: mediumseagreen;
    transform: translateX(0);
  }
  to {
    background: indianred;
    transform: translateX(50px);
  }
}

其中，四个 div 分别设置不同的 animation-fill-mode 值。为了更好地查看效果，设置动画等待时间 animation-delay 为1秒。

可以把动画执行过程分成三个阶段，如截图：

• 动画开始前（500ms）

• 动画执行中（2.00s）

• 动画结束后（3.10s）

根据设置的样式，黑色背景为初始样式，绿色背景为动画第一帧的样式，红色背景为动画最后一帧的样式。

比较以上三个阶段可以看出：

• none

默认值 none 表示，动画执行前后不改变任何样式。所以，在动画开始前和动画结束后，目标的样式和初始样式一致。

• forwards

forwards 表示，在动画开始前目标的样式和初始样式一致，在动画结束后目标保持动画最后一帧的样式。

• backwards

backwards 表示，在动画开始前目标保持动画第一帧的样式，在动画结束后目标的样式和初始样式一致。

• both

both 综合 forwards 和 backwards，其表示，在动画开始前目标保持动画第一帧的样式，在动画结束后目标保持动画最后一帧的样式。

需要注意的是，动画第一帧和最后一帧取决于 animation-direction 和 animation-iteration-count。

参考：

• animation-fill-mode | MDN
• 理解 animation-fill-mode 属性