Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM AnimationEvent
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;}
}
164 Views
