BS3 carousel + animate.min.css doesn't work fine in Firefox

Question

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

<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> 

Only 3 slides. For the first appearance of each slide, the image and signature of the carousel have an effect (animate.min.css). But after that, the slides just come and go without any effect. This only happens in firefox. On Chrome 38.0.2125.104, it works as expected. Someone please suggest a way to fix the problem.

Answer 1

If you look at an example on the site , the classes will be applied, and if you want to run again, you need to delete and add the classes again, This is how the CSS3 animation restarts or starts again, deleting and adding classes again. You can read about it here . In your case, classes are not deleted and added again.

For Bootstrap, you can use slide.bs.carousel , where you can add classes again. I added the [data-animation] data attribute to the elements for the corresponding 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_); }); }); 

Demo Screenshot