CSS Animation: Fill Modes

Why CSS properties “snap back”

A common problem when using CSS @keyframes animations is that property values temporarily change during the animation but revert to their original state once the animation ends.

In this example, the div “snaps back” to opacity: 1; when the animation ends:

Why Does This Happen?

During an animation, the browser applies intermediate styles defined in @keyframes. However, after the animation completes, by default, the affected properties return to their original values as defined outside the animation.

An easy fix

The animation-fill-mode property controls how styles are applied before and after a keyframe animation runs:

• none (default): No styles from the animation persist after it ends.
• forwards: The element retains the styles from the last keyframe after completion.
• backwards: Styles from the first keyframe is applied during any animation delay.
• both: Applies both forwards and backwards effects.

It’s most common to use the shorthand syntax for this property.

In thisd example we use backwards to set .test to opacity: 0; during the 1s delay:

Browser support