Skip to main content
transionend event

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

CSS Transitions Module Level 3



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


Event information



Event handler parameters

handler [in]

Type: function

Event handler object.

Standards information


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.


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.

<!DOCTYPE html>

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


<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>

      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);




See also