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