animation-fill-mode
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 bothforwards
andbackwards
values toanimation-fill-mode
property.
Note: The first and last keyframe computed values depend on the value of
animation-direction
andanimation-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:
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:
Contribute to Docs
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.
Learn CSS on Codecademy
- Career path
Front-End Engineer
Front-end engineers work closely with designers to make websites beautiful, functional, and fast.Includes 34 CoursesWith Professional CertificationBeginner Friendly115 hours - Free course
Learn CSS
In this CSS tutorial, you’ll learn how to add CSS to visually transform HTML into eye-catching sites.Beginner Friendly6 hours