CSS animation-fill-mode Property

Definition and Usage

The animation-fill-mode property sets how an animation applies styles before and after it plays. By default the element snaps back to its normal CSS when the play is not running.

forwards keeps the last keyframe after the play ends. backwards applies the first keyframe during an animation-delay. both does both. It applies to all elements, including ::before and ::after, and it is not inherited. Fill mode does not remove motion for someone who set prefers-reduced-motion.

CSS Syntax

The initial value is none. For several animations, separate the keywords with commas, in the same order as the names.

Property Values

How to Use animation-fill-mode

Play a short fade once, add a delay so backwards can show, then pick the fill.

1. Write @keyframes fade whose from and to both differ from the resting style.
2. Set animation-name, animation-duration: 1s, and play it once (the default count).
3. Add animation-delay: 1s when you want to see backwards or both.
4. Set animation-fill-mode to forwards, backwards, or both.

Live Preview

Wait one second, then a one-second fade from opacity 0.25 to 0.5. Only animation-fill-mode changes. Apply again to replay.

CSS Examples

Each snippet uses the same fade and a one-second delay. The only change is animation-fill-mode. Use Try It Yourself for a live editor.

<style>
  @keyframes fade {
    from {
      opacity: 0.25;
    }

    to {
      opacity: 0.5;
    }
  }

  p {
    animation-name: fade;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
  }
</style>

<p>Fade</p>

<style>
  @keyframes fade {
    from {
      opacity: 0.25;
    }

    to {
      opacity: 0.5;
    }
  }

  p {
    animation-name: fade;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-fill-mode: backwards;
  }
</style>

<p>Fade</p>

<style>
  @keyframes fade {
    from {
      opacity: 0.25;
    }

    to {
      opacity: 0.5;
    }
  }

  p {
    animation-name: fade;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-fill-mode: both;
  }
</style>

<p>Fade</p>

Key Takeaways