animation-fill-mode

christian.dinh's avatar
Published Jul 8, 2021Updated Oct 25, 2023
Contribute to Docs

The animation-fill-mode animation property defines what values are applied by an animation outside its execution time.

Syntax

animation-fill-mode: <value>;

The <value> can be one of the following:

  • none: Default, no animation styles will be applied outside of the animation’s execution time.
  • forwards: The last keyframe values computed will be retained outside of the animation’s execution time.
  • backwards: The initial keyframe values computed will be retained outside of the animation’s execution time.
  • both: Provides both forwards and backwards values to animation-fill-mode property.

Note: The first and last keyframe computed values depend on the value of animation-direction and animation-iteration-count.

Example 1

The forwards mode is used to persist the last keyframe values computed outside of the animation’s execution time:

div {
height: 200px;
width: 200px;
background-color: blue;
animation-name: disappear;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes disappear {
from {
background-color: blue;
}
to {
background-color: white;
}
}

This code produces the following output:

animation-fill-mode forwards

Example 2

The backwards mode is used to persist the initial keyframe values computed outside of the animation’s execution time:

div {
height: 200px;
width: 200px;
background-color: blue;
animation-name: disappear;
animation-duration: 2s;
animation-fill-mode: backwards;
}
@keyframes disappear {
from {
background-color: blue;
}
to {
background-color: white;
}
}

This code produces the following output:

animation-fill-mode backwards

All contributors

Contribute to Docs

Learn CSS on Codecademy