HTML | DOM transitionend Event

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>

Output: Before:

After:

Supported Browsers: The browsers supported by DOM transitionend Event are listed below:

Google Chrome 26.0/4.0 (webkitTransitionEnd)
Internet Explorer 10.0
Firefox 16.0/4.0 (mozTransitionEnd)
Apple Safari 6.1/3.1 (webkitTransitionEnd)
Opera 12.1/10.5 (oTransitionEnd)

Article Tags :

HTML

Web Technologies

HTML-DOM