Spicing Up the Bootstrap Carousel with CSS3 Animations

antonella, thanks for the article. As abhilashsandi mentioned on Apr 1, the animation doesn’t replay in Firefox the second time around if you click to view the next/prev slide before the animation had time to finish. I found this great article on how to restart a CSS animation w/o javascript. See this codepen with the adjustments to the CSS and JS. Basically you temporarily assign a nonexistent animation to the element with CSS. In the article, they apply it with :hover. For this slider you apply it when the carousel item slides. Fortunately, Bootstrap temporarily applies classes “left” and “right” to the items when they slide, so you can temporarily apply the nonexistent animation to the elements using .left.active .animated and .right.active .animated.