为什么我的animate.css动画在Chrome中运行但在Firefox中不运行？

Question

我的动画在Firefox中不起作用; 它们淡入但不会像在Chrome中那样从外部滑入.我正在使用animate.css库来提供动画.

JSFiddle演示

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>

他们为什么在Chrome中工作,但在Firefox中却没有？如何让它们在Firefox中运行？

Answer 1

添加display: inline-block到span.这是因为CSS transforms 不应该工作的inline元素.出于某种原因,它适用于Webkit.

小提琴的例子

它是一个已知的问题,并已被讨论@ animate.css github