CODEWITHSUNDEEP
htmlcssgoogle-chromeanimationwebkit
singmotor
singmotor

Reputation: 4180

CSS animation not working in Chrome, working in Safari

My issue is that I have a simple twitter sprite sheet that I'm using to animate on hover. But, in Chrome, while it scoots left on hover, it doesn't animate.

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

I have seen a few others posts about this:

  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

And most of the advice seems to be that "-webkit-" is needed to preface "animation: " in the css for chrome. But I've done that. What am I missing to get this bird to flap in chrome as well as it does in Safari and Firefox? I'll use Javascript or jQuery if I have to. Thank you!

Upvotes: 0

Views: 1255

Answers (1)

vals
vals

Reputation: 64164

Your property

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

is probably wrong. If you want to say that there is no delay, make it clearer and set the unit

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

But this would be equivalent to 

animation: fly 0.2s steps(3) 3;

that is a more usual way to set it

Upvotes: 2

Related Questions