CSS animation-fill-mode Property

The animation-fill-mode property defines how a CSS animation applies styles to its target outside the time it is actually running — that is, before it starts and after it ends.

By default, a @keyframes animation only styles an element while it plays. The moment the animation finishes, the element snaps back to whatever its normal CSS says. If an animation-delay is set, the element also shows its normal styles during that waiting period. animation-fill-mode lets you change that behavior so the element can hold the last frame after finishing, or adopt the first frame before starting. It is one of the CSS3 properties.

Why animation-fill-mode matters

A common problem: you animate a box from invisible to visible, but as soon as the animation ends it disappears again — because the underlying rule still says opacity: 0. Setting animation-fill-mode: forwards keeps the element on its final keyframe so it stays visible. This is the single most common reason people reach for this property.

The four meaningful values map cleanly to when a frame is held:

none (default) — the element uses its normal styles before and after the animation. Keyframes only apply while playing.
forwards — after the animation ends, the element keeps the styles from the last keyframe it landed on (the to/100% frame for a normal run). The frame chosen depends on animation-iteration-count and animation-direction.
backwards — during the animation-delay period before the animation starts, the element already shows the styles from the first keyframe (depends on animation-direction).
both — applies the rules for forwards and backwards: the first frame holds before the delay finishes, and the last frame holds after the animation ends.

When you give the animation shorthand multiple comma-separated values, each fill mode applies to the corresponding animation listed in animation-name.

Initial Value	none
Applies to	All elements, It also applies to ::before and ::after pseudo-elements.
Inherited	No.
Animatable	No.
Version	CSS3
DOM Syntax	object.style.animationFillMode = "forwards";

Syntax

Syntax of CSS animation-fill-mode Property

animation-fill-mode: none | forwards | backwards | both | initial | inherit;

Example of the animation-fill-mode property with the "forwards" value:

Example of CSS animation-fill-mode Property with forwards value

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #1c87c9;
        position: relative;
        animation: element 5s;
        animation-fill-mode: forwards;
      }
      @keyframes element {
        from {
          top: 0px;
        }
        to {
          top: 200px;
          background-color: #8ebf42;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-fill-mode example</h2>
    <div></div>
  </body>
</html>

Try it Yourself »

With forwards, the box ends 200px lower and green — and stays there instead of jumping back to its starting position and blue color.

Example of the animation-fill-mode property with the "backwards" value:

Example of CSS animation-fill-mode Property with backwards value

backwards only has a visible effect when there is an animation-delay: during the delay the element already shows the first keyframe. Here, the box is already at its from position and the page waits 2 seconds before the motion begins.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #8ebf42;
        position: relative;
        top: 200px;
        animation: element 3s;
        animation-delay: 2s;
        animation-fill-mode: backwards;
      }
      @keyframes element {
        from {
          top: 0px;
          background-color: #1c87c9;
        }
        to {
          top: 200px;
          background-color: #8ebf42;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-fill-mode example</h2>
    <div></div>
  </body>
</html>

Try it Yourself »

During the 2-second delay the box sits at top: 0 and is blue — the first keyframe — instead of the green, 200px-down style from the element's own rule.

Example of the animation-fill-mode property with the "both" value:

Example of CSS animation-fill-mode Property with both value

both combines the two: the first keyframe holds during the delay, then the animation runs and the last keyframe holds afterward.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #1c87c9;
        position: relative;
        animation: element 3s;
        animation-delay: 2s;
        animation-fill-mode: both;
      }
      @keyframes element {
        from {
          top: 0px;
        }
        to {
          top: 200px;
          background-color: #8ebf42;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-fill-mode example</h2>
    <div></div>
  </body>
</html>

Values

Value	Description
none	This is the default value. Animation will not apply any style to the element before and after it starts.
forwards	Specifies that the element should keep the style values set by the last keyframe.
backwards	Specifies that the element should get the style values set by the first keyframe and keep it within animation-delay period.
both	Specifies that the animation should follow the rules for both forwards and backwards.
initial	It makes the property use its default value.
inherit	It inherits the property from its parents element.

Practice

The animation-fill-mode property has the following values, except:

forwardsbackwardsalternate