<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
#div {
width: 100%;
height: 100px;
background: green;
position: relative;
font-size: 40px;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
from {
top: 0px;
}
to {
top: 200px;
}
}
@keyframes mymove {
from {
top: 0px;
}
to {
top: 200px;
}
}
</
style
>
</
head
>
<
body
>
<
h1
style
=
"color:green"
>GeeksforGeeks</
h1
>
<
div
id
=
"div"
onclick
=
"GFGFun()"
>
Click me to start the animation.
</
div
>
<
script
>
let x =
document.getElementById("div");
// Start the animation with JavaScript
function GFGFun() {
// Code for Chrome, Safari and Opera
x.style.WebkitAnimation =
"mymove 4s 1";
// Standard syntax
x.style.animation =
"mymove 4s 1";
}
// Code for Chrome, Safari and Opera
x.addEventListener(
"webkitAnimationStart", StartFun);
x.addEventListener(
"webkitAnimationEnd", EndFun);
// Standard syntax
x.addEventListener(
"animationstart", StartFun);
x.addEventListener(
"animationend", EndFun);
function StartFun() {
this.innerHTML =
"The animation has started";
this.style.backgroundColor = "lime";
}
function EndFun() {
this.innerHTML =
"The animation has completed";
this.style.backgroundColor =
"lightgray";
}
</
script
>
</
body
>
</
html
>