transionend event

The transitionend event occurs at the completion of the transition. If the transition is removed before completion, the event will not fire.

Syntax

addEventListener Method	object.addEventListener("transionend", handler, useCapture)

Event information

Synchronous	No
Bubbles	Yes
Cancelable	Yes

Event handler parameters

handler [in]

Type: function

Event handler object.

Standards information

CSS Transitions Module Level 3

Remarks

These events were introduced in Internet Explorer 10.

As of Internet Explorer for Windows Phone 8.1 Update, Internet Explorer for Windows Phone supports "webkitTransitionEnd" as an alias for this property.

Examples

This example applies transitions to a <div> element, and fires the transitionstart and transitionend events to change the text in the box. Try the example online.

HTML


<!DOCTYPE html>
<html>

<head>
<title>CSS Transitions Event Example</title>
<style media="screen" type="text/css">
#animatedDiv {
    opacity: 0.5;
    background-color: #D2D2D2;
    color: black;
  width:100px;
  height:100px;
}
#animatedDiv:hover {
    opacity: 1;
    background-color: #F472D0;
    transform: rotate(45deg) translateX(200px);
    transition: all 5s linear 1s;
}
  #Figure {
  border: solid 1px black;
  }
</style>
</head>

<body>

<h1 id="DemoTitle">CSS transition events example</h1>
  <p>Hover your mouse over the inner box</p>
<div class="FigureContainer Bordered">
    <div id="Figure" style="width: 330px; height: 300px;">
        <div id="animatedDiv" aria-haspopup="true">
            Transitioned Element</div>
    </div>
</div>

    <script>
      var divObj = document.getElementById("animatedDiv");
      divObj.addEventListener("transitionstart", function () {
        this.innerHTML = "This is a transition start event";
      }, false);
      divObj.addEventListener("transitionend", function () {
        this.innerHTML = "This is a transition end event";
      }, false);

    </script>

</body>

</html>