Open In App

HTML | DOM TransitionEvent elapsedTime Property

Improve
Improve
Like Article
Like
Save
Share
Report

The TransitionEvent elapsedTime property is used for returning the number of seconds for which a transition has been running when a transitionend event occurs.
The TransitionEvent elapsedTime property is read-only property.

Syntax :

event.elapsedTime

Return Value: It returns a number which represents the number of seconds for which a transition has been running.

Below program illustrates the TransitionEvent elapsedTime property :

Example: Finding out the number of seconds for which a transition has been running.




<!DOCTYPE html>
<html>
  
<head>
    <title>TransitionEvent elapsedTime Property
   </title>
    
    <style>
        #div1 {
            width: 100px;
            height: 20px;
            background: green;
            transition: 3s;
        }
          
        #div1:hover {
            width: 300px;
        }
          
        h1 {
            color: green;
        }
          
        h2 {
            font-family: Impact;
        }
          
        body {
            text-align: center;
        }
    </style>
</head>
  
<body>
  
    <h1>GeeksforGeeks</h1>
    <h2>TransitionEvent elapsedTime Property</h2>
  
    <p>Hover over the element to see the number
      of seconds the transition effect has been running. </p>
  
    <div id="div1"></div>
  
    <script>
        document.getElementById("div1").addEventListener(
          "transitionend", myevent);
  
        function myevent(event) {
            
            // Return seconds.
            this.innerHTML = "Transition time is : " + 
              event.elapsedTime + " seconds";
        }
    </script>
  
</body>
  
</html>


Output:

Supported Browsers:

  • Opera
  • Internet Explorer
  • Google Chrome
  • Firefox
  • Apple Safari


Last Updated : 29 Jan, 2019
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads