animation-fill-mode: Hold Styles Before and After Animation

Why it exists

By default, CSS animations are temporary. They apply styles only while executing, and then the element reverts to its original state. This creates a jarring visual snap. animation-fill-mode was created to give developers control over an element's styling before the animation starts and after it ends, enabling smoother and more logical transitions.

The mental model

Think of animation-fill-mode as instructions for an actor's costume. The default (none) is like the actor only wearing the costume while on stage. forwards means they keep the costume on after the play ends. backwards means they put the costume on backstage before their scene starts, even during a delay. both means they do both.

How it works

This property defines which styles are applied outside the animation's execution time. It has four main values. First, none is the default; the animation's styles are not applied before or after. Second, forwards makes the element retain the styles from the last keyframe after the animation completes. Third, backwards makes the element adopt the styles of the first keyframe as soon as the animation is applied, holding them through any animation-delay. Fourth, both combines the two, applying the start styles during a delay and holding the end styles after completion.

When to use it

Use this property whenever you want an animation's result to feel permanent. If you animate a notification sliding into view, you want it to stay there, not snap back to its off-screen position. Any animation that changes an element's final layout position, opacity, or color will almost always need animation-fill-mode: forwards.

When not to use it

You can omit it for infinitely looping animations, like a loading spinner, or for purely decorative effects where the element is intended to return to its base state. For example, a button that briefly wiggles on hover should return to its normal state, so the default none is appropriate. Using forwards could prevent it from returning to its intended style.

One canonical example

An element is styled to be blue. You create a one-second animation to change its background to orange and move it to the right. Without animation-fill-mode, the element will turn orange, move right, and then instantly snap back to being blue in its original spot. By adding animation-fill-mode: forwards;, the element will remain orange and at its new position after the animation finishes.