动画填充模式 | animation-fill-mode

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

/* 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;

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

语法

值

none动画执行前后不改变任何样式forwards目标保持动画最后一帧的样式，最后一帧是哪个取决于animation-direction和 animation-iteration-count:

backwards动画采用相应第一帧的样式，保持 animation-delay，第一帧取法如下：

both动画将会执行 forwards 和 backwards 执行的动作。

注意：当您在一个animation-*属性上指定了多个以逗号分隔的值时，它们将以animation-name不同的方式分配给属性中指定的动画，具体取决于有多少个值。有关更多信息，请参阅设置多个动画属性值。

形式语法

<single-animation-fill-mode>#where 
<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="grows">This just grows.</div>
  <div class="growsandstays">This grows and stays big.</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动画。

规范

浏览器兼容性