為什么我的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