为什么我的 animate.css 动画在 Chrome 中有效，但在 Firefox 中无效？

Question

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

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 are not supposed to work 在 inline 元素上。由于某种原因，它可以在 Webkit 中使用。

Fiddle example

它是 known issue 并且已经在 animate.css github

中讨论过

为什么我的 animate.css 动画在 Chrome 中有效，但在 Firefox 中无效？

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

html

css

css-animations