animation-fill-mode

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

none

当动画未执行时，它不会将任何样式应用于目标。相反，元素将使用应用于它的任何其他 CSS 规则显示。这是默认值。

forwards

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

animation-direction	animation-iteration-count	遇到的最后一个关键帧
normal	偶数或奇数	100% 或 to
reverse	偶数或奇数	0% 或 from
alternate	偶数	0% 或 from
alternate	奇数	100% 或 to
alternate-reverse	偶数	100% 或 to
alternate-reverse	奇数	0% 或 from

动画属性的行为就像包含在设置的 will-change 属性值中一样。如果在动画期间创建了新的堆叠上下文，则目标元素在动画完成后将保留堆叠上下文。

backwards

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

animation-direction	第一个相关关键帧
normal 或 alternate	0% 或 from
reverse 或 alternate-reverse	100% 或 to

both

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

animation-fill-mode = 
  <single-animation-fill-mode>#  

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

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

HTML

<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>

CSS

.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 动画以获取更多示例。

• 使用 CSS 动画
• JavaScript AnimationEvent API
• 其他相关的动画属性：animation，animation-composition，animation-delay，animation-direction，animation-duration，animation-iteration-count，animation-name，animation-play-state，animation-timeline，animation-timing-function