animation-fill-mode

The animation-fill-mode property designates a style for the element before the animation starts, after it ends, or both.

Syntax

Since CSS animations do not affect the element before or after the first or last keyframe is played, this property can override the behavior.

div.ex {
  animation-fill-mode: backwards;
}

Values

none
Default value. No styles are applied before or after the animation is executed.

forwards
The style values that are are set by the last keyframe are retained, depending on animation-direction and animation-iteration-count.

backwards
The style values that are are set by the first keyframe are retained, depending on animation-direction, and are retained during the animation-delay period.

both
The animation will extend the animation properties in both directions.

initial
Sets the property to its default value.

inherit
Inherits this property’s value from its parent item.

Browser Compatibilty

Demos

User-submitted codepen.io examples of animation-fill-mode ↴

@ByteAtATime

See the Pen on CodePen.

@themolitorNiiiice!

reply?

Want to Contribute?

Submit a codepen.io link that demonstrates animation-fill-mode: