样式 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 属性
