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.
<!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.
<!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