CSS animation-fill-mode Property

CSS animation-fill-mode property allows us to define a style for the element when the animation is not running. In simple words, this property can be used to apply styles to the element before the animation starts or after it has finished running, or both.

In the example below, we have used animation-fill-mode: forwards;. This shows that the element will retain its styles at the end of the animation as defined in the last keyframe. Therefore, the animated element in the example below will not jump back to its initial state after finishing the animation. Try it out:

Example:

div{
    animation-name: moveRight;
    animation-duration: 5s;
    animation-fill-mode: forwards;
}
@keyframes moveRight{
    from{
        left: 0px;
    }
    to{
        left: 200px;
    }
}

The animation-fill-mode: backwards; specifies that the styles defined in the first keyframe will be applied to the element before the animation starts(i.e during the animation delay period). Therefore, the background color of the animated element in the example below will be pink during the animation delay(i.e. first 2 seconds). Try it out:

Example:

div{
    animation-name: moveRight;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-fill-mode: backwards;
}
@keyframes moveRight{
    from{
        background: pink;
        left: 0px;
    }
    to{
        left: 200px;
    }
}

The animation-fill-mode: both; is a combination of animation-fill-mode: forwards; and animation-fill-mode: backwards;. In this scenario, the styles defined in the last keyframe apply to the animated element when the animation has finished and the styles defined in the very first keyframe apply to the animated element before the animation starts(i.e. during the animation delay).

Therefore, the animated element in the example below will have a pink background during the animation period and will not jump back to the beginning once the animation has finished running. Try it out:

Example:

div{
    animation-name: moveRight;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-fill-mode: both;
}
@keyframes moveRight{
    from{
        background: pink;
        left: 0px;
    }
    to{
        left: 200px;
    }
}

CSS Syntax

The animation-fill-mode property has the below syntax:

animation-fill-mode: none|forwards|backwards|both|initial|inherit;

Property Values

The animation-fill-mode property accepts the following values:

noneThis is the default value. No specific style applies before(during delay) or after the animation.
forwardsStyle defined in the last keyframe applies to the element after the animation has finished.
backwardsStyle defined in the first keyframe applies to the element before the animation starts(i.e. during the animation delay).
bothStyle defined in the first keyframe applies to the element before the animation starts(i.e. during the animation delay) and the style defined in the last keyframe applies to the element after the animation has finished.
initialSets the animation-fill-mode property to its default value(none).
inheritInherits the animation-fill-mode property from the parent element.

General Info

Default Valuenone
InheritedNo
JavaScript Usageelement.style.animationFillMode = “forwards”;

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

Leave a Comment