GlobalEventHandlers.ontransitionend

An event handler for the transitionend event. This event is sent 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

Specification	Status	Comment
CSS Transitions The definition of 'ontransitionend' in that specification.	Working Draft

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