CSS animationfillmode Property (original) (raw)

CSS animation-fill-mode Property

Last Updated : 23 Aug, 2024

The animation-fill-mode property in CSS is used to define the styles that an animation applies to an element before and after it executes. By default, CSS animations do not affect an element until the first keyframe is played or after the last keyframe is played.

This property can override that behavior, allowing for more control over the animation's impact.

**Syntax

animation-fill-mode: none | forwards | backwards | both | initial | inherit;

**Property Value

The animation-fill-mode property contains many values which are listed below:

• **none: Default value. The animation does not apply any styles to the element before or after its execution.
• **forwards: After the animation completes, the element retains the styles from the last keyframe.
• **backwards: The element applies the styles from the first keyframe before the animation starts.
• **both: This property is used to follow the rules for both forwards and backward.
• **initial: This property is used to set the property to its default value.
• **inherit: This property is used to inherit this property from its parent element.

**Example: In this example, we are using the above-explained property.

html `