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.
Example-1: 3 second delay in animation, using time property value.
<!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 > |
chevron_right
filter_none
Output
-
Before click on the button:
-
After click on the button:
-
Finally:
Example-2: 3 second delay in animation.
<!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 > |
chevron_right
filter_none
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
- Mozilla Firefox: 16.0, 5.0 moz
- Opera: 30.0
- Safari: 9.0