Open In App
Related Articles

HTML | DOM Style animationDelay Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

The animationDelay Property in HTML DOM is used to set or returns the delay after which the animation should start

Syntax:

  • It is used to set the animationDelay property:
object.style.animationDelay = "time|initial|inherit"
  • It is used to return the animationDelay property:
object.style.animationDelay

Property Value:

  • time: It is Used to define number of seconds or milliseconds for delay in animation. Default value is 0.
  • initial: It is used to set the property on its default value.
  • inherit: It is used to inherit property from its parent.

Return Values: It returns a string value which representing the animation-delay property of an element.

Example-1: 3 second delay in animation, using time property value. 

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML DOM animationDelay 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 animationDelay 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";
           
            // Changing the animation delay.
            document.getElementById(
              "GFG_DIV").style.WebkitAnimationDelay =
              "3s";
           
            // for Chrome, Safari, and Opera
            document.getElementById(
              "GFG_DIV").style.animationDelay =
              "3s";
        }
    </script>
</body>
 
</html>

                    

Output

  • Before click on the button:

 

  • After click on the button:

 

  • Finally: 

Example-2: 3 second delay in animation. 

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML DOM animationDelay 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 animationDelay 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";
           
            // Changing the animation Delay.
            document.getElementById(
              "GFG_DIV").style.WebkitAnimationDelay =
              "3s";
           
             // for Chrome, Safari, and Opera
            document.getElementById(
              "GFG_DIV").style.animationDelay =
              "3s";
        }
    </script>
</body>
 
</html>

                    

Output

  • Before click on the button:

 

  • After click on the button:

 

  • Finally:

 

Supported Browsers: The browser supported by DOM Style animationDelay Property are listed below:

  • Google Chrome: 43.0 and above
  • Edge: 12 and above
  • Internet Explorer 10 and above
  • Mozilla Firefox: 16.0 and above
  • Opera: 30.0 and above
  • Safari: 9.0 and above


Last Updated : 07 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads