GlobalEventHandlers.ontransitionend

An event handler for the transitionend event. This event is sent to when a CSS transition completes.

Syntax

var transitionEndHandler = target.ontransitionend;

target.ontransitionend = Function

Value

A Function to be called when a transitionend event occurs indicating that a CSS transition has completed on the target, where the target object is an HTML element (HTMLElement), document (Document), or window (Window). The function receives as input a single parameter: a TransitionEvent object describing the event which occurred; the event's TransitionEvent.elapsedTime property's value should be the same as the value of transition-duration.

Example

In this example, we use the transitionrun and transitionend events to detect when the transition begins and ends, to cause a text update to occur during the transition. This could also be used to trigger animations or other effects, to allow chaining of reactions.

HTML content

This simply creates a <div> which we'll style with CSS below to make into a box that resizes and changes color and such.

<div class="box"></div>

CSS content

The CSS below styles the box and applies a transition effect which makes the box's color and size change, and causes the box to rotate, while the mouse cursor hovers over it.

.box {
  margin-left: 70px;
  margin-top: 30px;
  border-style: solid;
  border-width: 1px;
  display: block;
  width: 100px;
  height: 100px;
  background-color: #0000FF;
  color: #FFFFFF;
  padding: 20px;
  font: bold 1.6em "Helvetica", "Arial", sans-serif;
  -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s, color 2s;
  transition: width 2s, height 2s, background-color 2s, transform 2s, color 2s;
}

.box:hover {
  background-color: #FFCCCC;
  color: #000000;
  width: 200px;
  height: 200px;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

JavaScript content

Next, we need to establish our event handlers to change the text content of the box when the transition begins and ends.

let box = document.querySelector(".box");
box.ontransitionrun = function(event) {
  box.innerHTML = "Zooming...";
} 
box.ontransitionend = function(event) {
  box.innerHTML = "Done!";
}

Result

The resulting content looks like this:

Notice what happens when you hover your mouse cursor over the box, then move it away.

Specification

Browser compatibility

[1] Chrome calls this event handler onwebkittransitionend and the event is prefixed as webkittransitionend.

See also

• The transitionend event this event handler is triggered by
• TransitionEvent
• The transitionrun event, which occurs when the transition begins