Understanding CSS3 Transition Events

CSS3 transitions allow for smooth animations and visual effects on web elements. To enhance the user experience and synchronize actions with these transitions, it's important to monitor their progress. This article addresses the question of whether CSS3 provides events to check when a transition begins or concludes.

The W3C CSS Transitions Draft

The W3C CSS Transitions Draft establishes that a CSS transition triggers corresponding DOM events. For each transitioning property, an event is generated. This enables developers to execute actions that coincide with the transition's completion.

WebKit

Under WebKit, the webkitTransitionEnd event is fired once a transition finishes. Setting a JavaScript event listener for this event allows developers to catch the completion.

box.addEventListener('webkitTransitionEnd', function(event) {
  alert("Finished transition!");
}, false);

Mozilla, Opera, and Internet Explorer

Most browsers support a single event for transition completion:

• Firefox: transitionend
• Opera: oTransitionEnd
• WebKit: webkitTransitionEnd
• Internet Explorer: transitionend

In Internet Explorer, the transitionend event fires only when the transition completes successfully; removing it prematurely prevents the event from being triggered.

Bringing It Together

By leveraging the appropriate event based on the browser and using JavaScript event listeners, developers can monitor the progress of CSS3 transitions and perform necessary actions in sync with their completion.