HTML | DOM Style animationName Property

The animationName Property in HTML DOM is used to set or returns a name for @keyframes animation.

Syntax:

It is used to set the animationName property:

object.style.animationName = "none|keyframename|initial|inherit"

It is used to return the animationName property:

object.style.animationName

Property Value: It contains the name of the animation.

none: When the animation is none. this is default value.
keyframename: Name of keyframe for bind to the selector.
initial: It is used to set default value.
inherited: It is used to inheritproperty from parent.

Example-1:

html

<!DOCTYPE html>
<html>

<head>
    <title>
        HTML DOM animationName Property
    </title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: green;
            position: relative;
            -webkit-animation: move_1 2s infinite;
            /* For Chrome, Safari, Opera*/
            animation: move_1 2s infinite;
        }
        /* For Chrome, Safari, Opera */
        
        @-webkit-keyframes move_1 {
            from {
                left: 150px;
            }
            to {
                left: 350px;
            }
        }
        
        @keyframes move_1 {
            from {
                left: 150px;
            }
            to {
                left: 350px;
            }
        }
        /* For Chrome, Safari, Opera */
        
        @-webkit-keyframes move_2 {
            from {
                left: 270px;
                width: 0px;
                height: 0px;
            }
            to {
                left: 270px;
                width: 100px;
                height: 100px;
                background: blue;
            }
        }
        
        @keyframes move_2 {
            from {
                left: 270px;
                width: 0px;
                height: 0px;
            }
            to {
                left: 270px;
                width: 100px;
                height: 100px;
                background: blue;
            }
        }
    </style>
</head>

<body style="text-align:center;">

    <h1 style="color:green;">  
            GeeksForGeeks  
        </h1>

    <h2>DOM animationName Property</h2>
    <button onclick="Geeks()">
        Click Here
    </button>
    <br>
    <br>
    <div id="GFG_DIV"></div>

    <script>
        function Geeks() {
          
            // Changing the animation name.
            document.getElementById(
              "GFG_DIV").style.WebkitAnimationName =
              "move_2"; 
          
            // for Chrome, Safari, and Opera
            document.getElementById(
              "GFG_DIV").style.animationName = 
              "move_2";
        }
    </script>
</body>

</html>

Output

Before click on the button:

After click on the button:

Finally:

Example-2:

html

<!DOCTYPE html>
<html>

<head>
    <title>
        HTML DOM animationName Property
    </title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: green;
            position: relative;
            -webkit-animation: move_1 2s infinite;
            /* For Chrome, Safari, Opera*/
            animation: move_1 2s infinite;
        }
        /* For Chrome, Safari, Opera */
        
        @-webkit-keyframes move_1 {
            from {
                left: 150px;
            }
            to {
                left: 350px;
            }
        }
        
        @keyframes move_1 {
            from {
                left: 150px;
            }
            to {
                left: 350px;
            }
        }
        /* For Chrome, Safari, Opera */
        
        @-webkit-keyframes move_2 {
            from {
                left: 270px;
                width: 0px;
            }
            to {
                left: 270px;
                width: 100px;
                background: blue;
            }
        }
        
        @keyframes move_2 {
            from {
                left: 270px;
                width: 0px;
            }
            to {
                left: 270px;
                width: 100px;
                background: blue;
            }
        }
    </style>
</head>

<body style="text-align:center;">

    <h1 style="color:green;">  
            GeeksForGeeks  
        </h1>

    <h2>DOM animationName Property</h2>
    <button onclick="Geeks()">
        Click Here
    </button>
    <br>
    <br>
    <div id="GFG_DIV"></div>

    <script>
        function Geeks() {
          
            // Changing the animation name.
            document.getElementById(
              "GFG_DIV").style.WebkitAnimationName =
              "move_2"; 
          
            // for Chrome, Safari, and Opera
            document.getElementById(
              "GFG_DIV").style.animationName = "move_2";
        }
    </script>
</body>

</html>

Output

Before click on the button:

After click on the button:

Finally:

Supported Browsers:

Google Chrome: 43.0 and above
Mozilla Firefox: 16.0 and above
Internet Explorer: 10.0 and above
Edge: 12.0 and above
Opera: 30.0 and above
Safari: 9.0 and above

HTML | DOM Style animationName Property

Explore