References

Beginner-friendly references for web development, with live, editable examples.

The HTML ontransitioncancel event

Event All modern browsers Updated
Quick answer

The HTML ontransitioncancel attribute runs JavaScript when a CSS transition is canceled before completing. It is an inline handler for the transitioncancel event; in modern code prefer addEventListener('transitioncancel', …).

Overview

The ontransitioncancel event attribute runs JavaScript when a CSS transition is canceled. In JavaScript the event itself is named transitioncancel — drop the on prefix when you call addEventListener.

It is a CSS transition event. The handler receives a TransitionEvent with the propertyName that transitioned, which is the clean way to chain an action after a CSS transition completes.

You can wire this up with the inline ontransitioncancel HTML attribute, but the modern, recommended approach is element.addEventListener('transitioncancel', handler) in JavaScript. That keeps behavior out of your markup, lets you attach several handlers to the same event, and makes them easy to remove. The inline attribute is fine for quick demos.

Syntax

<element ontransitioncancel="handler()">…</element>

element.addEventListener('transitioncancel', handler);

Best practices

  • Prefer element.addEventListener('transitioncancel', handler) over the inline ontransitioncancel attribute — it separates behavior from markup and allows multiple handlers.
  • Use it to run code after a CSS transition instead of guessing with a timer.
  • Check event.propertyName when several properties transition at once.
  • Respect prefers-reduced-motion for the transitions these events track.

Frequently asked questions

What is the ontransitioncancel event?
It runs JavaScript when a CSS transition is canceled. In JavaScript the event is named transitioncancel.
How do I run code after a CSS transition ends?
Listen for the transitionend event on the element.
Which property finished transitioning?
Read event.propertyName from the TransitionEvent.
Should I use the ontransitioncancel attribute or addEventListener?
Prefer addEventListener('transitioncancel', …) in JavaScript. The inline ontransitioncancel attribute works but mixes behavior into the markup and allows only one handler per element.
ontouchstart ontransitionend