HTML | DOM Style animationDelay Property
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
.png)
