YouTip LogoYouTip

Prop Style Animationfillmode

# Style animationFillMode Property [![Image 8: Style Object Reference](#) Style Object](#) ## Example Change the animationFillMode property of a
element: document.getElementById("myDIV").style.animationFillMode="forwards"; [Try it Yourself Β»](#) * * * ## Definition and Usage The animationFillMode property specifies the style applied to an element when the animation is not playing (when it has finished, or when it has a delay and has not yet started). By default, CSS animations do not affect an element until the first keyframe is played, and stop affecting the element after the last keyframe completes. The animationFillMode property can override this behavior. * * * ## Browser Support ![Image 9: Internet Explorer](#)![Image 10: Firefox](#)![Image 11: Opera](#)![Image 12: Google Chrome](#)![Image 13: Safari](#) Only Firefox and Opera support the animationFillMode property. * * * ## Syntax Get the animationFillMode property: _object_.style.animationFillMode Set the animationFillMode property: _object_.style.animationFillMode="none|forwards|backwards|both|initial|inherit" ## Property Values | Value | Description | | --- | --- | | none | Default value. The animation will not apply any styles to the target element before or after the animation execution. | | forwards | After the animation ends (as determined by its animation-iteration-count), the animation will apply the property values for the name of the animation. | | backwards | The animation will apply the property values defined in the first relevant keyframe as soon as it is applied to the target, and retain this during the animation-delay period. These are the values from the from keyframe (when animation-direction is "normal" or "alternate") or to keyframe (when animation-direction is "reverse" or "alternate-reverse"). | | both | The animation will follow the rules for both forwards and backwards. Thus, it will extend the animation properties in both directions. | | initial | Sets this property to its default value. See (#). | | inherit | Inherits this property from its parent element. See (#). | ## Technical Details | Default Value: | none | | --- | | Return Value: | A String, representing the animation-fill-mode property of an element. | | CSS Version | CSS3 | * * * ## Related Articles CSS Reference: (#) * * Style Object](#)
← Prop Style AnimationiterationcProp Style Animationduration β†’