X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

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 affect 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 (depend 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>

Let’s see what will happen if we use "backwards" value.

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>

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.

Browser support

43.0+
4.0-42.0 -webkit-
12.0+ 16.0+
5.0-15.0 -moz-
9.0+
5.1-8.0 -webkit-
12.0+
15.0-29.0 -webkit-

Practice Your Knowledge

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



Do you find this helpful?

Related articles