Why are my animate.css animations working in Chrome but not in Firefox?

Question

My animations are not working in Firefox; they fade-in but do not slide-in from the outside like they do in Chrome. I am using the animate.css library to give animation.

JSFiddle Demo

h2{
   text-align:center;
}
span {
     -webkit-animation-duration: 3s !important;
     -moz-animation-duration: 3s !important;
     -o-animation-duration: 3s !important;
     animation-duration: 3s !important;
}
.dly {
     -webkit-animation-delay: 2s !important;
     -moz-animation-delay: 2s !important;
     -o-animation-delay: 2s !important;
     animation-delay: 2s !important;
}

<div class="container">
    <h2>
        <span class="animated  fadeInLeftBig">A</span>
        <span class="dly animated  bounceInDown"> B</span>
        <span class="animated  fadeInRightBig"> C</span>
    </h2>
</div>

Why are they working in Chrome, but not in Firefox? How can I make them work in Firefox?

Answer 1

Add display: inline-block to span . It is because css transforms are not supposed to work on inline elements. For some reason it works in Webkit though.

Fiddle example

Its a known issue and has been dicussed @ animate.css github