BS3 carousel + animate.min.css not working perfectly in Firefox

Question

I am using firefox 33.0 in Ubuntu 14.04. I have a website(localhost) with bootstrap 3 carousel. I have applied "animated pulse" (animate.min.css) class to my "img" in the "class=item" div and "animated fadeinleft" to my carousel-caption.

<div class="item">
   <img src="images/2.jpg" class="img-responsive animated pulse">
       <div class="container">
           <div class="carousel-caption">
               <h1 class="animated fadeinleft">Another example headline.</h1>
               <p class="animated fadeinright">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
         </div>
      </div>
</div>

There are 3 slides in total. For the first appearance of each slide, the image and carousel caption comes with the effect (animate.min.css). But after that the slides just comes and goes without any effect. This happens only in firefox. In Chrome 38.0.2125.104 it works as expected. Somebody please suggest a way to fix the issue.

Answer 1

If you look at the example on their site the classes are applied and if you want to trigger again you need to remove and add classes again. That is how CSS3 animation is restarted or triggered again by removing and adding classes again. You can read more about this here. In your case the classes are not removed and added again.

For Bootstrap you can use the slide.bs.carousel where you can add the classes again. I have added a data attribute [data-animation] to the elements for the respective animation.

<div class="active item">
    <img src="http://lorempixel.com/1024/750" alt="Slide1" class="img-responsive animated pulse" data-animation="pulse" />
    <div class="container">
       <div class="carousel-caption">
           <h1 class="animated fadeInLeft" data-animation="fadeInLeft">Another example headline.</h1>

           <p class="animated fadeInRight" data-animation="fadeInRight">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
       </div>
     </div>
</div>

JS code

function animateElement(obj, anim_) {
    obj.addClass(anim_ + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
        $(this).removeClass();
    });
}

$('#myCarousel').on('slide.bs.carousel', function (e) {

    var current = $('.item').eq(parseInt($(e.relatedTarget).index()));
    $('[data-animation]').removeClass();
    $('[data-animation]', current).each(function () {
        var $this = $(this);
        var anim_ = $this.data('animation');
        animateElement($this, anim_);
    });
});

Fiddle Demo