CSS动画无法在Chrome中运行，而可以在Safari中运行

Question

我的问题是，我有一个简单的Twitter Sprite表单，可以用来在悬停上设置动画。 但是，在Chrome浏览器中，尽管它在悬停时仍在滑动，但它没有动画。

#tw:hover #twitter-bird {
    margin-left:-100px;
    -webkit-animation: fly 0.2s steps(3) 0 3;
    -moz-animation: fly 0.2s steps(3) 0 3;
    animation: fly 0.2s steps(3) 0 3;
}

@-webkit-keyframes fly {
from { background-position: 0 0; }
to { background-position: -450px 0; }
}

@-moz-keyframes fly {
    from { background-position: 0 0; }
    to { background-position: -450px 0; }
}

@keyframes fly {
    from { background-position: 0 0; }
    to { background-position: -450px 0; }
}

我看过其他一些关于此的文章：

1. CSS动画在Chrome中不起作用
2. CSS动画在Chrome中不起作用
3. CSS3动画无法在Chrome中使用
4. CSS动画无法在Chrome上运行

而且大多数建议似乎是在Chrome的CSS中以“ -webkit-”作为“ animation：”的开头。 但是我已经做到了。 我想念这只鸟在chrome和Safari和Firefox中一样拍动吗？ 如果需要，我将使用Javascript或jQuery。 谢谢！

Answer 1

您的财产

animation: fly 0.2s steps(3) 0 3;

可能是错误的。 如果您想说没有延迟，请使其更清晰并设置单位

animation: fly 0.2s steps(3) 0s 3;

但这等同于

animation: fly 0.2s steps(3) 3;

这是一种更常见的设置方式