The animation-fill-mode property defines what values are applied by an animation outside the time it is executing. More specifically, it defines what styles are applied to the element during the animation delay time, and after the animation has finished execution.
By default, an animation will not affect property values between the time it is applied (the animation-name property is set on an element, or the animation shorthand property) and the time it begins execution (which is determined by the animation-delay property). Also, by default an animation does not affect property values after the animation ends (the end of the animation is determined by the animation-duration and animation-iteration-count properties). The animation-fill-mode property can override this behavior.
A CSS animations will not affect the element you’re animating until the first keyframe is “played”, then stops affecting it once the last keyframe has completed. This can leave you with some awkward jumps and cuts. You can use animation-fill-mode to smooth the transitions into the animation styles and outside them, when the animation is finished playing.
You can “prepare” your element for the animation by applying the styles of the first animation keyframe to the element, while the element is waiting for the animation to start, which is usually during the animation delay time; that is, after you’ve applied the animation to the element, but before it actually starts playing. This will prevent a sudden jump from the initial state of the element to the first state in the animation, if the latter is not the same as the initial state.
You can also have the element keep the styles applied to it at the end of the animation in the last keyframe, once the animation is finished. This is usually useful to prevent a “jump” back to the initial styles. For example, if you’re animating a ball by moving it from one side to another, you may want it to remain at its new position, and not jump back to its initial position once the animation is over. This is where the animation-fill-mode property also helps.
You can also do both of the above: apply the styles of the beginning of the animation to the element before the animation begins (in the delay time) and have the element keep the final styles applied by the animation when it’s finished. These are usually easier to understand with a live example, so make sure you check the live demo section below for a live example.
You can specify one or multiple comma-separated animation-fill-mode values. When you provide a list of comma-separated values, this list is usually mapped to a list of animations specified using the animation-name property.
For example, if you provide two animation-fill-mode values, then the first value determines the fill mode of the first animation in the list of animation names provided by animation-name, and the second fill mode specifies the fill mode of the second animation.
The animation-fill-mode property is usually specified as part of the animation shorthand property.
Official Syntax
Values
- none
- The animation has no effect when it is applied but not executing.
- forwards
-
After the animation is done executing (has played the number of times specified by its
animation-iteration-countvalue) it continues to apply the values that it ended its last complete iteration with. This will be the values specified or implied for either its ‘100%’ or ‘0%’ keyframe (see the@keyframesentry for details), depending on the direction that the last complete iteration was executing in (peranimation-direction). If the animation didn’t complete an entire iteration (if the iteration count was 0 or a value less than 1) the values specified or implied for its ‘0%’ keyframe are used.Note that if
animation-iteration-countis a non-integer value, the animation will stop executing partway through its animation cycle, but a forwards fill will still apply the values of the ‘100%’ keyframe, not whatever values were being applied at the time the animation stopped executing. - backwards
-
Before the animation has begun executing (during the period specified by
animation-delay), the animation applies the values that it will start the first iteration with. If theanimation-directionisnormaloralternate, the values specified or implied for its ‘0%’ keyframe are used; if theanimation-directionisreverseoralternate-reverse, the values specified or implied for its ‘100%’ keyframe are used.Note that if the animation’s first keyframe styles are the same as the element’s styles before the animation was applied, then the
backwardsvalue may not have a noticeable effect. - both
-
The effects of both
forwardsandbackwardsfill apply.
Examples
The following example applies two different fill modes to two animations applied to an element, so that the element keeps the styles applied at the end of both animations, and the first styles applied by the first animation during its delay time.
.element {
animation-name: first-animation, second-animation;
animation-duration: 2s, 4s;
animation-delay: 2s, 0s;
animation-fill-mode: both, forwards;
animation-timing-function: ease-in, steps(3, start);
/* ... */
}
Live Demo
In the upcoming demo, the following animation keyframes are applied:
@keyframes rotate {
0% {
background-color: orange;
transform: rotate(0deg);
}
100% {
background-color: #0099CC;
transform: rotate(90deg);
}
}
Elements with animation-fill-mode values of forwards and both will remain “hanging” down when their animation ends, and their background color will be #0099CC which is a blue color. These are the styles specified in the last (‘100%’) keyframe.
Elements with animation-fill-mode values backwards and both have an animation delay time of ‘1s’, which will allow you to see how the first keyframe styles are applied to the element before the animation begins. These elements will get an orange background color as soon as the animation is applied to them, which is the style applied in the first (‘0%’) keyframe, but they will not be rotated. Once the animation starts, they will be rotated. The element with animation-fill-mode: both will get the orange background at the beginning and will keep the final rotation and blue background color when the animation ends.
To apply the animation to the elements, hover over their container.
View this demo on the Codrops PlaygroundBrowser Support
CSS Animation
Complex method of animating certain properties of an element
W3C Working Draft
Supported from the following versions:
Desktop
- 43
- 16
- 10
- 12
- 9
Mobile / Tablet
- 9.0
- 129
- No
- 129
- 130
