animation-fill-mode

概述

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

语法

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

animation-fill-mode: none
animation-fill-mode: forwards
animation-fill-mode: backwards
animation-fill-mode: both

/* 可以应用多个参数，这个时候使用逗号隔开  */
/* 各个参数应用于与次序相对应的动画名 */
animation-fill-mode: none, backwards
animation-fill-mode: both, forwards, none

值

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 执行的动作。

Example

你可以从下面这个例子中看到 animation-fill-mode 的效果。一个动画结束后你可能希望它应用最后一帧的样式，而不是第一帧。

HTML content

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

CSS content

.demo {
  border-top: 100px solid #ccc;
  height: 300px;
  font-family: sans-serif;
}
@keyframes grow {
    0% { font-size: 0 }
    100% { font-size: 40px }
}
@-webkit-keyframes grow {
    0% { font-size: 0 }
    100% { font-size: 40px }
}
.demo:hover .grows {
    animation-name: grow;
    animation-duration: 3s;
    -webkit-animation-name: grow;
    -webkit-animation-duration: 3s;
}
.demo:hover .growsandstays {
    animation-name: grow;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    -webkit-animation-name: grow;
    -webkit-animation-duration: 3s;
    -webkit-animation-fill-mode: forwards;
}

Specifications

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

See also

• Using CSS animations
• AnimationEvent