animation-fill-mode defines a style for when the animation stops.
This can be before or after the animation, or both.
An element with animation-fill-mode set to forwards.
When the animation ends, the final element style will be applied.
<style>
.animate {
width: 80px;
height: 80px;
background: steelblue;
animation: moveAnimation 5s;
animation-delay: 1s;
animation-fill-mode: forwards;
}
@keyframes moveAnimation {
from { transform: none;
background-color: steelblue; }
to { transform: translateX(375%) rotate(210deg);
background-color: midnightblue; }
}
</style>
<div class="animate"></div>
animation-fill-mode: none | forwards | backwards |
both | initial | inherit;
This table lists the animation-fill-mode property values.
| Value | Description |
|---|---|
| none | Default. No styles will be applied to the element before or after the animation is executing |
| forwards | Element will use the style values set by the last keyframe (depends on animation-fill-mode and animation-iteration-count) |
| backwards | Element will use the style values that are set by the first keyframe (depends on animation-fill-mode), and retain this during the animation-delay period |
| both | The animation will follow the rules for both forwards and backward, extending the animation properties in both directions |
| initial | Sets the value to its default value. |
| inherit | Inherits the value from its parent element. |
Click the buttons to see the different animation-fill-mode values.
The animation runs just once. To repeat refresh the page.
<style>
.my-animate {
width: 80px;
height: 80px;
background-color: steelblue;
animation-name: stretchAnimation;
animation-duration: 5s;
animation-fill-mode: backwards;
}
@keyframes stretchAnimation {
from { width: 80px; background-color: steelblue; }
to { width: 350px; background-color: orangered; }
}
</style>
<div class="my-animate"></div>
This table shows when animation-fill-mode support started for each browser.
 Chrome
|
43.0 | May 2015 |
 Firefox
|
16.0 | Oct 2012 |
 IE/Edge
|
10.0 | Sep 2012 |
 Opera
|
30.0 | Jun 2015 |
 Safari
|
9.0 | Sep 2015 |
