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

Question

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

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>

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

Answer 1

将display: inline-block添加到span。这是因为transforms元素上的css inline are not supposed to work。出于某种原因，它可以在Webkit中使用。

Fiddle example

它是一个known issue并且已被讨论过@ animate.css github