Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM AnimationEvent
The HTML DOM AnimationEvent is a JavaScript object that handles events occurring during CSS animations. It provides detailed information about animation-related events and offers greater control over CSS animations by describing which events triggered specific animations.
Properties
The AnimationEvent object contains three main properties −
| Property | Description |
|---|---|
| animationName | Returns the name of the CSS animation being executed. |
| elapsedTime | Returns the time elapsed since the animation started running, measured in seconds. |
| pseudoElement | Returns the name of the pseudo-element where the animation occurs (e.g., ::before, ::after, ::first-line). Returns empty string for regular elements. |
Syntax
Following is the syntax for accessing AnimationEvent properties −
animationEvent.animationName animationEvent.elapsedTime animationEvent.pseudoElement
Animation Event Types
CSS animations trigger three main event types −
animationstart − Fired when the animation begins.
animationiteration − Fired at the end of each animation cycle (except the last one).
animationend − Fired when the animation completes.
Example − Basic AnimationEvent
Following example demonstrates how to capture animation events and display the animation name −
<!DOCTYPE html>
<html>
<head>
<title>AnimationEvent Example</title>
<style>
#animDiv {
margin: 10px;
width: 400px;
height: 100px;
background: lightgreen;
position: relative;
font-size: 20px;
padding: 20px;
animation-name: slideDown;
animation-duration: 3s;
animation-fill-mode: forwards;
}
@keyframes slideDown {
from { top: 0px; }
to { top: 200px; }
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<h2>AnimationEvent Demo</h2>
<div id="animDiv">Animated Box</div>
<p id="output"></p>
<script>
var animatedDiv = document.getElementById("animDiv");
var output = document.getElementById("output");
animatedDiv.addEventListener("animationstart", function(event) {
output.innerHTML = "Animation started: " + event.animationName;
});
animatedDiv.addEventListener("animationend", function(event) {
output.innerHTML += "<br>Animation ended: " + event.animationName;
});
</script>
</body>
</html>
The output shows the animation name when it starts and ends −
Animation started: slideDown Animation ended: slideDown
Example − Tracking Elapsed Time
Following example demonstrates how to use the elapsedTime property to monitor animation progress −
<!DOCTYPE html>
<html>
<head>
<title>AnimationEvent - Elapsed Time</title>
<style>
#spinner {
width: 50px;
height: 50px;
background: #3498db;
border-radius: 50%;
margin: 20px auto;
animation: rotate 2s linear infinite;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#timeDisplay {
text-align: center;
font-size: 18px;
margin: 20px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<h2 style="text-align: center;">Animation Time Tracker</h2>
<div id="spinner"></div>
<div id="timeDisplay">Elapsed Time: 0 seconds</div>
<script>
var spinner = document.getElementById("spinner");
var timeDisplay = document.getElementById("timeDisplay");
spinner.addEventListener("animationiteration", function(event) {
timeDisplay.innerHTML = "Elapsed Time: " + event.elapsedTime.toFixed(2) + " seconds";
});
</script>
</body>
</html>
The display updates with elapsed time after each rotation cycle −
Elapsed Time: 2.00 seconds Elapsed Time: 4.00 seconds Elapsed Time: 6.00 seconds
Example − Multiple Animation Events
Following example shows how to handle all three animation events together −
<!DOCTYPE html>
<html>
<head>
<title>Complete AnimationEvent Example</title>
<style>
#bounceBall {
width: 60px;
height: 60px;
background: #e74c3c;
border-radius: 50%;
margin: 20px;
animation: bounce 1s ease-in-out 3;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-100px); }
}
#eventLog {
border: 1px solid #ddd;
padding: 15px;
margin: 20px;
height: 150px;
overflow-y: auto;
background: #f9f9f9;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<h2>Animation Event Logger</h2>
<div id="bounceBall"></div>
<div id="eventLog"><strong>Event Log:</strong><br></div>
<script>
var ball = document.getElementById("bounceBall");
var log = document.getElementById("eventLog");
function logEvent(message) {
log.innerHTML += message + "<br>";
log.scrollTop = log.scrollHeight;
}
ball.addEventListener("animationstart", function(event) {
logEvent("START: " + event.animationName + " began");
});
ball.addEventListener("animationiteration", function(event) {
logEvent("ITERATION: " + event.animationName + " completed cycle at " +
event.elapsedTime.toFixed(1) + "s");
});
ball.addEventListener("animationend", function(event) {
logEvent("END: " + event.animationName + " finished after " +
event.elapsedTime.toFixed(1) + "s");
});
</script>
</body>
</html>
The event log displays all animation events as they occur −
Event Log: START: bounce began ITERATION: bounce completed cycle at 1.0s ITERATION: bounce completed cycle at 2.0s END: bounce finished after 3.0s
Browser Compatibility
AnimationEvent is supported in all modern browsers. However, older browsers may require vendor prefixes. For maximum compatibility, test animations across different browsers and versions.
Conclusion
The HTML DOM AnimationEvent provides powerful control over CSS animations through JavaScript. By listening to animation events and accessing properties like animationName, elapsedTime, and pseudoElement, developers can create interactive and responsive animation experiences that react to animation lifecycle changes.
318 Views
