style animationFillMode 属性

更改 <div> 元素的animationFillMode 属性：

document.getElementById("myDIV").style.animationFillMode = "forwards";

描述

animationFillMode 属性指定当动画未播放时（当动画完成时，或者当动画有"delay"时），元素将应用什么样式。

默认情况下，CSS 动画在第一个关键帧为 "played" 之前不会影响您正在设置动画的元素，然后在最后一个关键帧完成后停止影响它。 AnimationFillMode 属性可以覆盖此行为。

返回动画填充模式属性：

object.style.animationFillMode

设置动画填充模式属性：

Value	Description
none	Default value. The animation will not apply any styles to the target before or after it is executing
forwards	After the animation ends (determined by animation-iteration-count), the animation will apply the property values for the time the animation ended
backwards	The animation will apply the property values defined in the keyframe that will start the first iteration of the animation, during the period defined by animation-delay. These are either the values of the from keyframe (when animation-direction is "normal" or "alternate") or those of the to keyframe (when animationDirection is "reverse" or "alternate-reverse")
both	The animation will follow the rules for both forwards and backwards. That is, it will extend the animation properties in both directions
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

animationFillMode是 CSS3 (1999) 的一项功能。

所有浏览器都完全支持它：


Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	11