Firefox Not Raising Event For Transitionend

document.getElementById('mylogo').addEventListener( 'webkitTransitionEnd', function( event ) { document.getElementById('mylogotext').className = 'mylogoText_visible_style'; });

Solution 1:

The transitionend event and it's prefixed variants do NOT trigger if the transition is interrupted.

From the W3C spec:

The transitionend event occurs at the completion of the transition. In the case where a transition is removed before completion, such as if the transition-property is removed, then the event will not fire.

How CSS transitions work on a browser level (see: http://www.w3.org/TR/css3-transitions/#reversing ) is that if an animation is interrupted by some property change it is "reset" by executing in reverse or in some cases completely ignored. This may be helpful to know as it may eliminate the need for using transitionend in most projects.