animation-fill-mode

CSS 属性 animation-fill-mode 设置CSS动画在执行之前和之后如何将样式应用于其目标。

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

使用简写属性 animation 一次性设置所有动画属性通常很方便。

/* Single animation */
animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;

/* Multiple animations */
animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;

none

当动画未执行时，动画将不会将任何样式应用于目标，而是已经赋予给该元素的 CSS 规则来显示该元素。这是默认值。

forwards

目标将保留由执行期间遇到的最后一个关键帧计算值。 最后一个关键帧取决于animation-direction和animation-iteration-count的值：

animation-direction	animation-iteration-count	last keyframe encountered
normal	even or odd	100% or to
reverse	even or odd	0% or from
alternate	even	0% or from
alternate	odd	100% or to
alternate-reverse	even	100% or to
alternate-reverse	odd	0% or from

backwards

动画将在应用于目标时立即应用第一个关键帧中定义的值，并在animation-delay期间保留此值。 第一个关键帧取决于animation-direction的值：

animation-direction	first relevant keyframe
normal or alternate	0% or from
reverse or alternate-reverse	100% or to

both

动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性。

<single-animation-fill-mode>#
where 
<single-animation-fill-mode> = none | forwards | backwards | both

您可以在以下示例中看到 animation-fill-mode 的效果。 它演示了如何对于运行无限时间的动画，可以使其保持最终状态而不是恢复到原始状态（这是默认状态）。

<p>Move your mouse over the gray box!</p>
<div class="demo">
 <div class="growsandstays">This grows and stays big.</div>
  <div class="grows">This just grows.</div>
</div>

.demo {
  border-top: 100px solid #ccc;
  height: 300px;
}

@keyframes grow {
  0% { font-size: 0; }
  100% { font-size: 40px; }
}

.demo:hover .grows {
  animation-name: grow;
  animation-duration: 3s;
}

.demo:hover .growsandstays {
  animation-name: grow;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

更多示例请查看 CSS 动画 。

• Using CSS animations
• JavaScript AnimationEvent API