animation-fill-mode
Anonymous contributor
Anonymous contributor3077 total contributions
Anonymous contributor
Published Jul 8, 2021Updated Oct 31, 2022
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;}}
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;}}
All contributors
- Anonymous contributorAnonymous contributor3077 total contributions
- robgmerrill124 total contributions
- garanews209 total contributions
- christian.dinh2481 total contributions
- Anonymous contributor
- robgmerrill
- garanews
- christian.dinh
Looking to contribute?
- 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.