🎯 CSS animation-name Property

The animation-name property specifies which @keyframes animation should be applied to an HTML element. It acts as the connection between an element and a previously defined animation sequence.

Without animation-name, the browser does not know which animation should run, even if other animation properties such as duration or timing function are defined.

First, you create an animation using the @keyframes rule. Then, you assign that animation to an element using animation-name.

@keyframes fadeIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}

.box {
    animation-name: fadeIn;
}
                

In this example, the element uses the animation called fadeIn.

The none value means no animation is applied to the element. This is the default value.

.box {
    animation-name: none;
}
                

The element remains static because no animation is assigned.

You can assign any previously defined animation by using its @keyframes name.

@keyframes slideRight {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(150px);
    }

}

.box {
    animation-name: slideRight;
}
                

The browser follows all animation stages defined in the slideRight keyframes.

The initial value resets the property to its default state, which is none.

.box {
    animation-name: initial;
}
                

After resetting, the element no longer uses any animation.

The following example applies a fade-in animation to an element.

@keyframes fadeIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}

.box {
    animation-name: fadeIn;
    animation-duration: 2s;
}
                

The element gradually becomes visible over a period of two seconds.

The animation-name property is essential because it tells the browser exactly which animation sequence should be executed.

• Connect elements to @keyframes animations
• Create reusable animation definitions
• Keep animation code organized
• Improve maintainability of CSS projects
• Allow multiple custom animations across a website