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