HTML | DOM TransitionEvent

Last Updated : 11 Feb, 2019

The creation and completion of a CSS Transition result in a corresponding DOM Event. An event is fired for each property that undergoes a transition which gives the name of the property and the duration for which transition occurs. If the transition is not executed before completion the event will not fire.

Property Values:

propertyName: Returns the name of the transition.
elapsedTime: Returns the number of seconds a transition has been running.

Event Types:

transitionend: The event occurs when a CSS transition has been completed.
transitionstart: The event occurs when a CSS transition has started.

Syntax:

for transitionend event:

object.addEventListener("transitionend", myScript);

Example-1: “transitionend” event

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        #myDIV { 
            width: 100px; 
            height: 100px; 
            background: green; 
            transition: width 2s; 
        } 
          
        #myDIV:hover { 
            width: 400px; 
            height: 400px; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
  
        <div id="myDIV"></div> 
  
        <script> 
            
            // TransitionEnd Event for SAFARI. 
            document.getElementById( 
  "myDIV").addEventListener("webkitTransitionEnd", func); 
            
            // TransitionEnd Event for other 
            // Standard Browsers. 
            document.getElementById( 
  "myDIV").addEventListener("transitionend", func); 
  
            function func() { 
              this.innerHTML =  
               "transitionend event occured -"  
              "The transition has completed"; 
              this.style.backgroundColor = "lime green"; 
            } 
        </script> 
    </center> 
</body> 
  
</html> 

Output:

Before:

After:

Example-2: “TransitionEvent” propertyName property.

<head> 
    <style> 
        #myDIV { 
            width: 100px; 
            height: 100px; 
            background: green; 
            -webkit-transition: 3s; 
            transition: 3s; 
        } 
          
        #myDIV:hover { 
            height: 400px; 
  
        } 
    </style> 
</head> 
  
<body> 
  
    <div id="myDIV"></div> 
  
    <script> 
        // Code for Safari 3.1 to 6.0 
        document.getElementById("myDIV" 
         ).addEventListener("webkitTransitionEnd" 
                            , myFunction); 
  
        // Standard syntax 
        document.getElementById("myDIV" 
         ).addEventListener("transitionend" 
                            , myFunction); 
  
        
        function myFunction(event) { 
            
            // Property Name 
            this.innerHTML = "CSS Property used: " 
            + event.propertyName; 
        } 
    </script> 
</body> 
  
</html> 