The HTML DOM AnimationEvent is an object in JavaScript handling the events that occur when CSS animation runs. It basically provides us information about the events that are related to the animation. It offers us a greater control over the CSS animations. It represents the relation between events and animation by describing which events triggered the animations.
Properties
Following are the properties for Animation Event −
| Property | Description |
|---|---|
| animationName | It will return the name of the animation being executed. |
| elapsedTime | Returns the time elapsed since animation is running in seconds. |
| pseudoElement | It returns the name of the pseudo-element of the animation. Eg: ::before, ::after, ::first-line etc. |
Syntax
Following is the syntax for animationEvent −
animationEvent.property
Example
Let us see an example for animationEvent −
<!DOCTYPE html>
<html>
<head>
<style>
#ANIM-DIV {
margin: 10px;
width: 400px;
height: 100px;
background: lightgreen;
position: relative;
font-size: 30px;
animation-name: animMove;
animation-duration: 5s;
}
@-webkit-keyframes animMove {
from {top: 0px;}
to {top: 200px;}
}
</style>
</head>
<body>
<div id="ANIM-DIV"></div>
<script>
var x = document.getElementById("ANIM-DIV");
x.addEventListener("animationstart", myAnimFunction);
function myAnimFunction(event) {
this.innerHTML = "The animation-name is: " + event.animationName;
}
</script>
</body>
</html>Note − This was tested on chrome 74.0.3729.169 .Check your browser compatibility for animationEvent.
Output
It will produce the following output −
After 5s, the element will shift downwards −
In the above example −
We have created a 400px X 100px rectangular box by using a div.
#ANIM-DIV {
margin: 10px;
width: 400px;
height: 100px;
background: lightgreen;
position: relative;
font-size: 30px;
animation-name: animMove;
animation-duration: 5s;
}We have then specified the start and end position between which the div will move to animate −
@-webkit-keyframes animMove {
from {top: 0px;}
to {top: 200px;}
}