CSS animation-fill-mode Property

❮ Prev Next ❯

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 any animation property, they will be attached to the animations that are defined in animation-name differently.

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

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

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

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #1c87c9;
        position: relative;
        -webkit-animation: element 5s;
        /* Safari 4.0 - 8.0 */
        -webkit-animation-fill-mode: forwards;
        /* Safari 4.0 - 8.0 */
        animation: element 5s;
        animation-fill-mode: forwards;
      }
      /* Safari 4.0 - 8.0 */
      @-webkit-keyframes element {
        from {
          top: 0px;
        }
        to {
          top: 200px;
          background-color: blue;
        }
      }
      @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:

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #1c87c9;
        position: relative;
        -webkit-animation: element 5s;
        /* Safari 4.0 - 8.0 */
        -webkit-animation-fill-mode: backwords;
        /* Safari 4.0 - 8.0 */
        animation: element 5s;
        animation-fill-mode: backwords;
      }
      /* Safari 4.0 - 8.0 */
      @-webkit-keyframes element {
        from {
          top: 0px;
        }
        to {
          top: 200px;
          background-color: blue;
        }
      }
      @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.
backwords	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.