CSS动画无法在Chrome中工作，在Safari中工作

Question

我的问题是我有一个简单的twitter精灵表，我正在使用动画悬停。但是，在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 Animation not working in Chrome
2. CSS Animation not working in Chrome
3. css3 animation not working in chrome
4. CSS Animation not working on Chrome

而且大部分的建议似乎是“-webkit-”在css for chrome前面加上“animation：”。但我已经做到了。我错过了什么让这只鸟在镀铬以及它在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; 

这是一个比较常用的方法来设置它