Skip to content
Related Articles

Related Articles

HTML | DOM Style animationDelay Property

View Discussion
Improve Article
Save Article
  • Last Updated : 07 Jun, 2022

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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!