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;"> w3wiki </ h1 > < h2 >DOM animationDelay Property</ h2 > < button onclick="Beginner()"> Click Here </ button > < br > < br > < div id="GFG_DIV"></ div > < script > function Beginner() { // 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;"> w3wiki </ h1 > < h2 >DOM animationDelay Property</ h2 > < button onclick="Beginner()"> Click Here </ button > < br > < br > < div id="GFG_DIV"></ div > < script > function Beginner() { // 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
Contact Us