animation-fill-mode

概述

animation-fill-mode CSS 属性指定动画执行之前之后的样式。

• 初始值 none
• 适用元素 all elements, ::before and ::after pseudo-elements
• 可继承 no
• 适用媒体 visual
• 计算值 as specified
• 可动画 否
• Canonical order the unique non-ambiguous order defined by the formal grammar

语法

Formal syntax: <single-animation-fill-mode>#

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

The # indicates that several values may be given, separated by commas.
Each applies to the animation defined in the same order in animation-name.
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

The animation will follow the rules for both forwards and backwards, thus extending the animation properties in both directions.

Example

You can see the effect of animation-fill-mode in the following example.  For animations that run for an infinite time, you might want them to end on the last state rather than the first.

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

See also

• Using CSS animations
• AnimationEvent
• Animation-related CSS properties and at-rules: animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state, animation-timing-function, @keyframes