How To Detect CSS Transition Start And End With Javascript

Transition Hook

We could add listener on event ‘transitionstart’, ‘transitionrun’ and ‘transitionend’ to detect CSS transition hooks. But currently only ‘transitionend’ is widely supported by modern browsers.

Examples see CSS Transition Hooks Detection

When there are more than one property in transition, these transition hooks will be fired are each property. You have to retrive all transition properties with window.getComputedStyle() or element.getBoundingClientRect() and implement functionality Promise.all() to invoke callback when all transitionend are fired.