Easy Tutorial
❮ Prop Reset Type Prop Progress Position ❯

Style animationFillMode Property

Style Object

Example

Change the animationFillMode property of a <div> element:


Definition and Usage

The animationFillMode property specifies a style for the element when the animation is not playing (before it starts, after it ends, or both).

By default, CSS animations do not affect the element until the first keyframe is played and stops affecting the element after the last keyframe is completed. The animationFillMode property can override this behavior.


Browser Support

Only Firefox and Opera support the animationFillMode property.


Syntax

Return the animationFillMode property:

Set the animationFillMode property:

Property Values

Value Description
none Default value. The animation will not apply any styles to the element before or after it is executed.
forwards The element will retain the style values that are set by the last keyframe (determined by animation-iteration-count).
backwards The animation will apply the property values defined in the first keyframe during the animation-delay period. These are the values from the from keyframe (when animationDirection is "normal" or "alternate") or the to keyframe (when animationDirection is "reverse" or "alternate-reverse").
both The animation will follow the rules for both forwards and backwards. Thus, the animation will extend the animation properties in both directions.
initial Sets this property to its default value. See initial
inherit Inherits this property from its parent element. See inherit

Technical Details

Default value: none
Return value: String, representing the animation-fill-mode property of the element.
--- ---
CSS version CSS3
--- ---

Related Articles

CSS Reference: animation-fill-mode Property


Style Object

❮ Prop Reset Type Prop Progress Position ❯