CSS animation-name

The animation-name property in CSS is used to specify the name of the @keyframes animation you want to apply. This property is used in combination with the animation property to create animations on elements.

Here is the syntax for the animation-name property:

.element {
    animation-name: animationName;
}

.box {
        width: 100px;
        height: 100px;
        background-color: #3498db;
        animation-name: myAnimation;
        animation-duration: 2s;
        animation-iteration-count: infinite;
    }

    @keyframes myAnimation {
        0% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(50px);
        }
        100% {
            transform: translateY(0);
        }
    }

Where animationName is the name of the @keyframes animation you want to apply. Here's an example to illustrate how the animation-name property works:

In this example, we have created a simple animation named myAnimation using the @keyframes rule. The .box element will move up and down continuously as the animation is applied.