CSS-Animation funktioniert nicht in Chrome, funktioniert in Safari

Question

Mein Problem ist, dass ich ein einfaches Twitter-Sprite-Blatt habe, das ich benutze, um auf Hover zu animieren. Aber in Chrome, während es beim Schweben nach links fährt, wird es nicht animiert.

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

Und die meisten der:

#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; } 
} 

Ich habe ein paar andere Beiträge über diese gesehen Beratung scheint zu sein, dass "-webkit-" benötigt wird, um "Animation:" in der CSS für Chrom vorzuschlagen. Aber ich habe das getan. Was fehlt mir, um diesen Vogel in Chrom und Safari zu flappieren? Ich werde Javascript oder jQuery verwenden, wenn ich muss. Vielen Dank!

Answer 1

Ihr Eigentum

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

ist wahrscheinlich falsch. Wenn Sie sagen wollen, dass es keine Verzögerung gibt, macht es klarer und stellen Sie das Gerät

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

Dies würde aber zu

animation: fly 0.2s steps(3) 3; 

gleichwertig sein, die einen üblichen Weg ist, um es zu setzen