Css 内联动画延迟适用于Firefox，但不适用于Chrome

我正在玩一些css转换，并为动态元素设置不同的动画延迟，以便css动画在页面上交错

这是动画

-webkit-animation: bounceInLeft .5s ease-in 0s backwards;
-moz-animation: bounceInLeft .5s ease-in 0s backwards;
 animation: bounceInLeft .5s ease-in 0s backwards;

实际的动画在ff和chrome上都运行良好，但在firefox上，动画会正确地间隔延迟，而在chrome上，所有动画都会立即发生

这是内联代码。这在firefox上正常工作

style="animation-delay: 1s;"

这在chrome上不起作用

style="-webkit-animation-delay: 1s;"

---

我已经在动画规则中指定了一个延迟，但我认为在firefox上设置一个内联会覆盖它。有什么想法吗？谢谢

我刚刚创建了一个JSFIDLE来复制您的情况，它似乎是在向我致敬chrome中的内联延迟。也许其他地方也有问题。看看这把小提琴，也许它将有助于阐明另一个问题

HTML

<div id="some-div" style="animation-delay: 1s; -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -o-animation-delay: 1s;">Hi</div>

---

我发现了一些奇怪的东西。出于某种原因，内联重写chrome中样式规则的唯一方法是，如果动画延迟是而不是0的值

如果值为0而不是chrome，那么它在firefox中可以正常工作。我通过将延迟的初始值更改为1s，然后使用内联样式覆盖它来修复它

#some-div
{
    width:100px;
    height:20px;
    background:#f00;
    font-family:Arial;
    -webkit-animation: cssAnimation .5s ease-in 0s backwards;
    -moz-animation: cssAnimation .5s ease-in 0s backwards;
    -o-animation: cssAnimation .5s ease-in 0s backwards;
    animation: cssAnimation .5s ease-in 0s backwards;
}
@keyframes cssAnimation {
    from { transform: translate(50px); }
    to { transform:  translate(0px); }
}
@-webkit-keyframes cssAnimation {
    from { -webkit-transform: translate(50px); }
    to { -webkit-transform:  translate(0px); }
}
@-moz-keyframes cssAnimation {
    from { -moz-transform:translate(50px); }
    to { -moz-transform: translate(0px); }
}
@-o-keyframes cssAnimation
{
    from { -o-transform: translate(50px); }
    to { -o-transform:  translate(0px); }
}