Style animationFillMode 属性
示例
更改 <div> 元素的 animationFillMode 属性
document.getElementById("myDIV").style.animationFillMode = "forwards";自己尝试 »
描述
animationFillMode 属性指定动画未播放时（动画结束后或动画延迟时）元素将应用哪些样式。
默认情况下，CSS 动画在第一个关键帧“播放”之前不会影响您正在动画的元素，并且在最后一个关键帧完成后会停止影响它。animationFillMode 属性可以覆盖此行为。
语法
返回 animationFillMode 属性
object.style.animationFillMode
设置 animationFillMode 属性
object.style.animationFillMode = "none|forwards|backwards|both|initial|inherit"
属性值
| 值 | 描述 |
|---|---|
| none | 默认值。动画在执行之前或之后不会对目标应用任何样式 |
| forwards | 动画结束后（由 animation-iteration-count 确定），动画将应用动画结束时的属性值 |
| backwards | 动画将在 animation-delay 定义的期间内应用在关键帧中定义的属性值，这些关键帧将启动动画的第一次迭代。这些值是 from 关键帧的值（当 animation-direction 为“normal”或“alternate”时）或 to 关键帧的值（当 animationDirection 为“reverse”或“alternate-reverse”时） |
| both | 动画将遵循 forwards 和 backwards 的规则。也就是说，它将在两个方向上扩展动画属性 |
| initial | 将此属性设置为其默认值。 阅读关于 initial |
| inherit | 从其父元素继承此属性。 阅读关于 inherit |
技术细节
| 默认值 | none |
|---|---|
| 返回值 | 一个字符串，表示元素的 animation-fill-mode 属性 |
| CSS 版本 | CSS3 |
浏览器支持
animationFillMode 是 CSS3 (1999) 特性。
它在所有浏览器中都得到完全支持
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 11 |
相关页面
CSS 参考： animation-fill-mode 属性
