动画填充模式 | 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一次性设置所有动画属性通常很方便。

Initial value	none
Applies to	all elements, ::before and ::after pseudo-elements
Inherited	no
Media	visual
Computed value	as specified
Animation type	discrete
Canonical order	the unique non-ambiguous order defined by the formal grammar

语法

值

none动画执行前后不改变任何样式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	first relevant keyframe
normal or alternate	0% or from
reverse or alternate-reverse	100% or to

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动画。

规范

Specification	Status	Comment
CSS AnimationsThe definition of 'animation-fill-mode' in that specification.	Working Draft	Initial definition.

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	(Yes)-webkit 43.0	(Yes)-webkit (Yes)	5.0 (5.0)-moz 16.0 (16.0)1	10	12-o 12.10	4.0-webkit

Feature	Android	Chrome	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile	Chrome for Android
Basic support	?	?	(Yes)-webkit (Yes)	?	?	?	?	?