CSS animation-name Property

Last Updated : 23 Aug, 2024

The animation-name property in CSS is used for defining animations. It is used to specify the name of the @keyframes that describe the animation.

Understanding the Animation-Name Property

The animation-name property in CSS is used to connect an element to a set of keyframes. The keyframes describe the animation’s sequence of changes.

Syntax:

animation-name: keyframename|none|initial|inherit;

Property Value: The animation-name property value is listed below:

keyframename: This property is used to specify the name of the keyframe which needs to bind with the selector.
none: It is the default value. It is used to specify that there will be no animation.
initial: This property is used to set this property to its default value.
inherit: This property is used to inherit this property from its parent element.

Example: In this example, we are using the above-explained property.

html

<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | animation-name Property
    </title>
    <style>
        body {
            text-align: center;
            width: 70%;
        }

        h1 {
            color: green;
        }

        div {
            width: 50px;
            height: 50px;
            background: green;
            position: relative;
            -webkit-animation: geeks 5s infinite;
            -webkit-animation-delay: 2s;
            animation: geeks 5s infinite;
            animation-delay: 2s;
        }

        @-webkit-keyframes geeks {
            from {
                left: 0%;
            }

            to {
                left: 80%;
            }
        }

        @keyframes geeks {
            from {
                left: 0px;
            }

            to {
                left: 80%;
            }
        }

        #one {
            animation-direction: alternate-reverse;
            ;
        }

        @keyframes text {
            from {
                margin-left: 60%;
            }

            to {
                margin-left: 0%;
            }
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>animation-name property</h2>
    <div class="gfg"></div>
</body>
  
</html>