The animation-fill-mode property defines what values are applied by an animation delay time, and after the animation has finished execution. 351c5z

By default, an animation will not affect property values between the time it is applied (the 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 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 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.

.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);
    /* ... */
}
                

@keyframes rotate {
    0% {
        background-color: orange;
        transform: rotate(0deg);
    }
    100% {
        background-color: #0098D8;
        transform: rotate(90deg);
    }
}