CSS animation-fill-mode Property

The animation-fill-mode property sets a style to the element when the animation is not executing (before it starts, after it ends, or both).

The animation-fill-mode is one of the CSS3 properties.

The animation-fill-mode property is the only property that affects the element before the first @keyframe is played or after the last keyframe is played. It can assume the following values: "forwards" to specify that the element should keep the style values set by the last keyframe (depending on animation-iteration-count and animation-direction properties); "backwards" to specify that the element should get the style values set by the first keyframe (depends on animation-direction) and keep it within animation-delay period; "both" to specify that the animation should follow the rules for both "forwards" and "backwards", and "none" (default) to specify that no styles will be applied to the element before or after the animation is executed.

When multiple comma-separated values are specified for animation shorthand properties, they are applied to the corresponding animations defined 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 »

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

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

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #1c87c9;
        position: relative;
        animation: element 5s;
        animation-fill-mode: backwards;
      }
      @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 »

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:

forwards
backwards
alternate