animation-fill-mode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

CSS 属性 animation-fill-mode 设置 CSS 动画在执行之前和之后如何将样式应用于其目标。

尝试一下

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

语法

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;

none

当动画未执行时,动画将不会将任何样式应用于目标,而是已经赋予给该元素的 CSS 规则来显示该元素。这是默认值。

forwards

目标将保留由执行期间遇到的最后一个关键帧计算值。最后一个关键帧取决于animation-directionanimation-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的值:

animation-direction first relevant keyframe
normal or alternate 0% or from
reverse or alternate-reverse 100% or to
both

动画将遵循forwardsbackwards的规则,从而在两个方向上扩展动画属性。

备注: 当你在animation-*属性上指定多个以逗号分隔的值时,它们将根据值的数量以不同的方式分配给 animation-name 属性中指定的动画。有关更多信息,请参阅设置多个动画属性值

正式语法

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

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

示例

你可以在以下示例中看到 animation-fill-mode 的效果。它演示了如何对于运行无限时间的动画,可以使其保持最终状态而不是恢复到原始状态(这是默认状态)。

HTML

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

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
CSS Animations Level 1
# animation-fill-mode
初始值none
适用元素all elements, ::before and ::after pseudo-elements
是否是继承属性
计算值as specified
动画类型Not animatable

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
animation-fill-mode
backwards
both
forwards
none

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.

参见