CSS animation-fill-mode Property

Example

Let the <div> element retain the style values from the last keyframe when the animation ends:

The style of the last keyframe will be applied on the <div> at the end of the animation.

div {
  animation-fill-mode: forwards;
}

Definition and Usage

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

CSS animations do not affect the element before the first keyframe is played or after the last keyframe is played. The animation-fill-mode property can override this behavior.

Default value:	none
Inherited:	no
Animatable:	no.
Version:	CSS3
JavaScript syntax:	object.style.animationFillMode="forwards"

• Inherited : "Inherited = no" means that it cannot takes (inherit) it's value from it's parent element.
• object - object in javascript means the element on which animation-fill-mode is applied.
• Animatable - "Animatable = no" means that it cannot be animated with CSS @keyframes.

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.

Property
animation-fill-mode	43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.1 12.0 -o-

CSS Syntax

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

Property Values

Value	Description
none	Default value. Animation will not apply any styles to the element before or after it is executing
forwards	The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count)
backwards	The element will get the style values that is set by the first keyframe (depends on animation-direction), and retain this during the animation-delay period
both	The animation will follow the rules for both forwards and backwards, extending the animation properties in both directions
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

More Examples

Example

Let the <div> element get the style values set by the first keyframe before the animation starts (during the animation-delay period):

div {
  animation-fill-mode: backwards;
}

Example

Let the <div> element get the style values set by the first keyframe before the animation starts, and retain the style values from the last keyframe when the animation ends:

div {
  animation-fill-mode: both;
}