How Do You Detect the Start and End of CSS3 Transitions?

CSS3 Transition Events

When working with CSS3 transitions, it's often useful to know when a transition has started or ended. In CSS3, there are various events fired by elements to indicate these transitions.

CSS Transition End Event

Definition:
The transitionend event is triggered when a CSS transition completes for the specified property.

Syntax:

element.addEventListener('transitionend', callbackFunction, { once: true });

Example:

const box = document.querySelector('.box');

box.addEventListener('transitionend', function(e) {
  console.log(`Transition for property ${e.propertyName} has ended.`);
}, { once: true });

Other Transition Events

Beyond the transitionend event, some browsers also provide additional events:

Webkit-Specific Events:

• webkitTransitionStart: Triggered when a CSS transition starts.
• webkitTransitionRun: Triggered multiple times during a CSS transition.

Mozilla-Specific Event:

• transitionstart: Triggered when a CSS transition on any property starts.

Opera-Specific Event:

• oTransitionStart: Triggered when a CSS transition on any property starts.

Internet Explorer Event:

• MSTransitionEnd: Triggered when a CSS transition on any property ends.

Browser Compatibility

The above events are supported in various browsers according to the specifications provided in the W3C CSS Transitions Draft and the respective browser documentations.

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