Safariで動作しているChromeでCSSアニメーションが機能しない

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

のほとんどをCssの "animation："の前に、 "-webkit-"が必要です。しかし、私はそれをやった。この鳥をChromeでフラップするだけでなく、SafariやFirefoxでも何が欠けているのですか？私はJavascriptまたはjQueryを使用します。ありがとうございました！

Answer 1

あなたの財産

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

はおそらく間違っています。あなたは遅延がないことを言いたい場合は、それをより明確にし、部

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

を設定するしかし、これは、それ