HTML DOM animationstart Event
The animationstart event occurs when a CSS animation has started to play. events that can occur when a CSS animation plays:
- animationstart: occurs when the CSS animation has started.
- animationiteration: occurs when the CSS animation is repeated.
- animationend: occurs when the CSS animation has been completed.
Syntax:
- Code for Chrome, Safari, and Opera:
object.addEventListener("webkitAnimationStart", myScript);
object.addEventListener("animationstart", myScript);
Example: In this example, we will see the use of DOM animationstart Event
html
<!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 >
< center >
< 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);
// Standard syntax
x.addEventListener(
"animationstart", StartFun);
function StartFun() {
this.innerHTML =
"The animation has started";
this.style.backgroundColor =
"lime";
}
</ script >
</ center >
</ body >
</ html >
|
Output:
Supported Browsers: The browsers supported by animationstart Event are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Apple Safari
- Opera
Last Updated :
20 Jun, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...