How Do I Detect When CSS3 Transitions Start and End?

CSS3 Transition Events

CSS3 transitions provide a seamless way to add animations and effects to your web pages. However, to effectively control and synchronize these animations, it's essential to know when they start and end. Enter CSS3 transition events.

Event Types

Depending on the browser you're using, there are different events fired when a CSS3 transition starts or ends:

• W3C CSS Transitions Draft:

  • transitionstart (start)
  • transitionend (end)

• Webkit:

  • webkitTransitionEnd (end)

• Mozilla:

  • transitionend (end)

• Opera:

  • oTransitionEnd (end)

• Internet Explorer:

  • transitionend (end)

Listening for Events

To listen for CSS3 transition events, you can use JavaScript event listeners:

element.addEventListener('transitionend', function(event) {
  // Transition completed
});

Browser Compatibility

The availability of CSS3 transition events varies across browsers. Refer to the table below for compatibility information:

Browser	Transition Start Event	Transition End Event
W3C CSS Transitions Draft	Yes	Yes
Webkit	No	Yes
Mozilla	No	Yes
Opera	No	Yes
Internet Explorer	No	Yes

Usage Example

The following code demonstrates how to use transitionend to listen for the completion of a CSS3 transition:

<div>

When you hover over the #box element, the transition will animate the width to 200px smoothly. The transitionend event will be fired when the transition finishes.

The above is the detailed content of How Do I Detect When CSS3 Transitions Start and End?. For more information, please follow other related articles on the PHP Chinese website!