Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

animation-fill-mode

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

概述

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

初始值none
适用元素all elements, ::before and ::after pseudo-elements
是否是继承属性
适用媒体visual
计算值as specified
是否适用于 CSS 动画
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

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

Specification Status Comment
CSS Animations
animation-fill-mode
Working Draft  

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Yes)-webkit 5.0 (5.0)-moz
16.0 (16.0)
10 12-o
12.10 #
4.0-webkit
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? 5.0 (5.0)-moz
16.0 (16.0)
? ? ?

See also

文档标签和贡献者

 此页面的贡献者: teoli, Sebastianz, wy-ei, ziyunfei, fishenal
 最后编辑者: teoli,