Understanding CSS animation-fill-mode

The CSS animation-fill-mode property dictates how an element's styles are applied before an animation begins and after it finishes. By default, CSS animations do not affect an element's styling outside the active duration of the animation. By configuring animation-fill-mode, developers can instruct the browser to apply keyframe styles during animation delays or persist the final state once the sequence completes.

The Default Animation Lifecycle

By default, an element only adopts styles from an @keyframes rule while the animation is actively running.

1. Before Execution (Delay Period): The element displays its standard CSS styles, even if an animation-delay is applied.
2. During Execution: The element animates between keyframe states.
3. After Execution: The element instantly reverts to its original CSS styles, discarding the styles from the final keyframe.

The animation-fill-mode property overrides this default behavior through four primary values.

The Four Values of animation-fill-mode

1. none

This is the default value. The animation does not apply any styles to the target element before it starts or after it finishes.

.box {
  animation-name: slide;
  animation-duration: 2s;
  animation-delay: 1s;
  animation-fill-mode: none;
}

• Before start (during 1s delay): Retains base styling.
• After finish: Reverts immediately to base styling.

2. forwards

The element retains the computed style values set by the last keyframe encountered during execution.

.box {
  animation-name: slide;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

• After finish: The element stays in the state defined by the final keyframe (e.g., 100% or to), preventing the visual "snap back" to its initial style.
• Note: The "last" keyframe depends on animation-direction and animation-iteration-count. If animation-direction is set to reverse, the element will retain the 0% keyframe styles instead.

3. backwards

The element immediately applies the values defined in the first relevant keyframe as soon as the animation is applied, holding those styles throughout any animation-delay period.

.box {
  animation-name: fadeIn;
  animation-duration: 2s;
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

• Before start (during 2s delay): The element immediately renders using the properties of the first keyframe (e.g., 0% or from), rather than its base CSS values.
• After finish: The element reverts back to its original CSS rules.
• Note: If animation-direction is set to reverse, the initial state will be drawn from the 100% keyframe.

4. both

The both value combines the behaviors of both forwards and backwards.

.box {
  animation-name: slideAndFade;
  animation-duration: 2s;
  animation-delay: 1s;
  animation-fill-mode: both;
}

• Before start: Immediately applies the styles of the first keyframe during the delay phase.
• After finish: Retains the styles of the final keyframe indefinitely.

Summary Matrix