HTML | DOM transitionend Event

Last Updated : 13 Jun, 2022

The transitionend event in HTML DOM occurs when a CSS transition has ended. if the user removes transition before completion the event will not fire.

Syntax:

Code for Safari 3.1 to 6.0:

object.addEventListener("webkitTransitionEnd", Script);

Standard syntax:

object.addEventListener("transitionend", Script);

Example:

html

<!DOCTYPE html>
<html>
 
<head>
    <title>HTML DOM transitionend Event</title>
    <style>
        #divID {
            width: 150px;
            height: 150px;
            background: green;
            -webkit-transition: height 1s;
            transition: height 1s;
        }
         
        #divID:hover {
            height: 300px;
        }
    </style>
</head>
 
<body>
 
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <h2>HTML DOM transitionend Event</h2>
        <div id="divID"></div>
    </center>
    <script>
        // Code for Safari 3.1 to 6.0
        document.getElementById(
          "divID").addEventListener("webkitTransitionEnd", GFGfun);
 
        // Standard syntax
        document.getElementById(
          "divID").addEventListener("transitionend", GFGfun);
 
        function GFGfun() {
            this.innerHTML = 
              "transitionend event occurred - The transition has completed";
            this.style.backgroundColor = "limegreen";
        }
    </script>
 
</body>
 
</html>