Spicing Up the Bootstrap Carousel with CSS3 Animations

HTML & CSS
45

Hi Jason,

That’s a great workaround!

As you point out, the problem is noticeable in Firefox. It’s got to do with the way this browser handles animations: I think it stops them when the window is not currently active, which helps with performance. Since the animation works on the animationend event, my guess is that this event isn’t caught if one changes browser window before the animation has completed. It seems to me you also changed the doAnimations() function by getting rid of the reliance on the animationend event to remove the Animate.css classes.

You could achieve a similar result by using setTimeout:

function doAnimations( elems ) {
  elems.each(function () {
     var $this = $(this),
         $animationType = $this.data('animation');
         $this.addClass($animationType);
         var wait = window.setTimeout( function() {
             $this.removeClass($animationType) 
         }, 5000);
   }); 
}

If you use the above, there’s no need to change the CSS.

Thank you so much for sharing your solution, it’s awesome :slight_smile: