Andreas Köberle Andreas Köberle - 1 year ago 139
Javascript Question

CSS3 transition events

Are there any events fired by an element to check wether a css3 transition has started or end?

Answer Source

W3C CSS Transitions Draft

The completion of a CSS Transition generates a corresponding DOM Event. An event is fired for each property that undergoes a transition. This allows a content developer to perform actions that synchronize with the completion of a transition.


You can set a handler for a DOM event that is sent at the end of a transition. The event is an instance of WebKitTransitionEvent and its type is webKitTransitionEnd in JavaScript.

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


There is a single event that is fired when transitions complete. In Firefox, the event is transitionend, in Opera, oTransitionEnd, and in WebKit it is webkitTransitionEnd.


There is one type of transition event available. The oTransitionEnd event occurs at the completion of the transition.

Internet Explorer

The transitionend event occurs at the completion of the transition. If the transition is removed before completion, the event will not fire.

SO: How do I normalize CSS3 Transition functions across browsers?

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download