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>

Output:

Before:

After:

Supported Browser:

Google Chrome-26.0
Internet Explorer-10.0
Mozilla Firefox-16.0
Safari-6.1
Opera-12.1

My Personal Notes

Related Articles