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 TransitionEvent elapsedTime Property
The HTML DOM TransitionEvent elapsedTime property returns a floating-point number representing the duration in seconds that a CSS transition has been running when a transition event is fired. This property is particularly useful for monitoring and debugging CSS transitions or creating animations with precise timing.
Syntax
Following is the syntax to access the elapsedTime property −
transitionEvent.elapsedTime
Return Value
The elapsedTime property returns a double representing the number of seconds the transition has been running. This value excludes any time the transition was paused.
Example − Basic Transition Timing
Following example demonstrates how to capture and display the elapsed time of a CSS transition −
<!DOCTYPE html>
<html>
<head>
<title>TransitionEvent elapsedTime</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
form {
width: 70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin: 5px;
}
#playArea {
display: inline-block;
border-radius: 50%;
background-color: #DC3545;
width: 50px;
height: 50px;
border: 3px solid #AC3509;
transition: all 1.3s ease;
}
#playArea:hover {
transform: translateX(80px);
}
#divDisplay {
margin-top: 10px;
font-weight: bold;
color: #333;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>TransitionEvent elapsedTime Example</legend>
<p>Hover over the red circle to see the transition timing:</p>
<div id="playArea"></div>
<div id="divDisplay">Hover to start transition...</div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var playDisplay = document.getElementById("playArea");
function getElapsedTime(event) {
divDisplay.textContent = 'Elapsed Time in Transition: ' + event.elapsedTime + ' seconds';
}
playDisplay.addEventListener("transitionend", getElapsedTime);
</script>
</body>
</html>
The output shows a red circle that moves 80 pixels to the right when hovered. After the transition completes, it displays the elapsed time −
Before hover: Red circle in original position After hover: Red circle moved right, showing "Elapsed Time in Transition: 1.3 seconds"
Example − Multiple Property Transitions
Following example shows how different CSS properties can have different transition durations −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Transition Properties</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.container {
text-align: center;
margin: 20px;
}
.box {
display: inline-block;
width: 100px;
height: 100px;
background-color: #007bff;
margin: 10px;
transition: transform 2s ease, background-color 1s ease;
}
.box:hover {
transform: scale(1.5) rotate(45deg);
background-color: #28a745;
}
#output {
margin-top: 15px;
min-height: 40px;
}
</style>
</head>
<body>
<div class="container">
<h2>Multiple Transition Properties</h2>
<p>Hover over the blue box - different properties have different durations:</p>
<div class="box" id="multiBox"></div>
<div id="output">Hover to see transition timing...</div>
</div>
<script>
var output = document.getElementById("output");
var box = document.getElementById("multiBox");
function logTransition(event) {
output.innerHTML += event.propertyName + ' completed in ' +
event.elapsedTime + ' seconds<br>';
}
box.addEventListener("transitionend", logTransition);
// Clear output when starting new hover
box.addEventListener("mouseenter", function() {
output.innerHTML = "Transitions in progress...<br>";
});
</script>
</body>
</html>
This example shows how background-color completes in 1 second while transform takes 2 seconds −
On hover: Transitions in progress... background-color completed in 1 seconds transform completed in 2 seconds
Example − Transition Event Types
Following example demonstrates different transition event types and their timing −
<!DOCTYPE html>
<html>
<head>
<title>Transition Event Types</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.demo-container {
text-align: center;
margin: 20px;
}
.animated-element {
width: 80px;
height: 80px;
background-color: #ff6b6b;
margin: 20px auto;
transition: width 2s ease-in-out;
border-radius: 10px;
}
.animated-element.expanded {
width: 200px;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
margin: 5px;
}
#eventLog {
background-color: #f0f0f0;
padding: 10px;
border-radius: 5px;
margin-top: 10px;
min-height: 60px;
text-align: left;
}
</style>
</head>
<body>
<div class="demo-container">
<h2>Transition Event Monitoring</h2>
<div class="animated-element" id="animatedBox"></div>
<button onclick="toggleTransition()">Toggle Width</button>
<button onclick="clearLog()">Clear Log</button>
<div id="eventLog">Click "Toggle Width" to see transition events...</div>
</div>
<script>
var box = document.getElementById("animatedBox");
var log = document.getElementById("eventLog");
function logEvent(eventType, event) {
log.innerHTML += eventType + ': ' + event.propertyName +
' - elapsed time: ' + event.elapsedTime + 's<br>';
}
box.addEventListener("transitionstart", function(e) {
logEvent("START", e);
});
box.addEventListener("transitionend", function(e) {
logEvent("END", e);
});
function toggleTransition() {
box.classList.toggle("expanded");
}
function clearLog() {
log.innerHTML = "Event log cleared...<br>";
}
</script>
</body>
</html>
This example logs both transitionstart and transitionend events with their elapsed times −
START: width - elapsed time: 0s END: width - elapsed time: 2s
Common Use Cases
The elapsedTime property is commonly used for −
-
Animation chaining − Triggering subsequent animations based on transition completion time.
-
Performance monitoring − Measuring actual vs expected transition durations.
-
User feedback − Providing timing information for interactive elements.
-
Debugging − Verifying that transitions are running for the expected duration.
Browser Compatibility
The TransitionEvent.elapsedTime property is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. It was introduced along with CSS Transitions and has excellent cross-browser support.
Conclusion
The TransitionEvent.elapsedTime property provides precise timing information for CSS transitions, returning the duration in seconds as a floating-point number. It is essential for creating sophisticated animations, monitoring transition performance, and building responsive user interfaces that depend on accurate timing feedback.
91 Views
