DOM 样式 animationFillMode属性用于指定动画未播放或动画完成或动画延迟时元素的样式。
animationFillMode属性可以覆盖 CSS 动画的默认行为,当第一个关键帧“播放”时,CSS 动画会影响元素,然后在最后一个关键帧完成后停止影响元素。
句法:
- 要返回 animationFillMode 属性,请使用以下内容:
object.style.animationFillMode;
- 要设置 animationFillMode 属性,请使用以下内容:
object.style.animationFillMode = "none|forwards|backwards|both| initial|inherit";
属性值:
- none:在执行之前或之后不会对目标应用任何样式。
- forwards:它将应用动画结束时间的属性值。
- 向后:它将应用关键帧中定义的属性值,该值将在动画延迟定义的时间段内开始动画的第一次迭代。
- both:它将向前和向后应用属性值到动画。
- 初始:它将属性设置为其默认值。
- 继承:此属性是从其父级继承的。
方法:
元素在动画延迟期间获取动画开始前的第一个关键帧设置的样式值。
示例 1:
Click the "Try it" button to let the
DIV element keep the styles set by the
last keyframe: to {left:0px;}, when
the animation is finished.
输出:
示例 2:
Click the "Try it" button to let the
DIV element keep the styles set by the
last keyframe: to {left:500px;}, when
the animation is finished.
输出:
支持的浏览器: animationFillMode 属性支持的浏览器如下:
- 谷歌浏览器 43.0
- 火狐 16.0
- 歌剧 30.0