CSS animation-fill-mode Property

What You’ll Learn

The animation-fill-mode property decides what happens to an element’s styles before an animation starts and after it finishes. It helps you avoid elements snapping back to their original look too soon.

Definition and Usage

The animation-fill-mode CSS property defines how computed values from an animation are applied to an element outside the active animation period — that is, before it begins and after it ends.

This is especially useful for entrance animations that should stay visible after finishing, or delayed animations that should already look like their starting keyframe while waiting to begin.

📝 Syntax

Set animation-fill-mode with one of its keyword values:

selector {
  animation-fill-mode: none | forwards | backwards | both;
}

Basic Example

.move {
  animation: moveRight 2s ease-out;
  animation-fill-mode: forwards;
}

Syntax Rules

• The initial value is none, so styles outside the animation period are not preserved by default.
• forwards keeps the styles from the last keyframe after the animation completes.
• backwards applies the first keyframe styles during the delay before the animation starts.
• both combines the behavior of forwards and backwards.
• Fill mode can be included in the animation shorthand, usually after delay and iteration count.

Default Value

The initial value of animation-fill-mode is none. Outside the active animation period, the element does not retain keyframe styles from before or after the animation runs.

💎 Property Values

These keywords control style behavior before and after the animation plays.

When to Use Each Fill Mode

Examples Gallery

Try animation-fill-mode with forwards, backwards, both, and shorthand syntax.

<style>
  @keyframes moveRight {
    from { left: 0; }
    to { left: 200px; }
  }
  .move {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    animation: moveRight 2s ease-out;
    animation-fill-mode: forwards;
  }
</style>

<div class="move"></div>

.banner {
  opacity: 1;
  animation: fadeUp 0.8s ease-out 1s;
  animation-fill-mode: backwards;
}

.card {
  animation: riseIn 0.9s ease-out 0.5s;
  animation-fill-mode: both;
}

.toast {
  animation: slideIn 0.6s ease-out forwards;
}

💡 Best Practices