CSS3 animation is not working on Mozilla firefox [closed]

问题

Closed. This question is off-topic. It is not currently accepting answers.

---

Want to improve this question? Update the question so it's on-topic for Stack Overflow.

Closed 5 years ago.

I am trying to make the flapping effect of bird using CSS3 keyframes. It is working fine on google chrome. It does not seem to work on mozilla firefox.

here is my fiddle

回答1:

It works if you use -moz-animation: fly 0.2s steps(4) 10;. It looks like firefox is having some issues with the way you have shorthanded the animation properties.

I'm not sure what the other 0 was supposed to be for, but it doesn't look like it's needed unless I am missing something...

Edit: I verified in Chrome that the extra 0 isn't needed either:

.follow-button:hover {
    -webkit-animation: fly 0.2s steps(4) 10;
    -moz-animation: fly 0.2s steps(4) 10;
    animation: fly 0.2s steps(4) 10;
}

来源：https://stackoverflow.com/questions/22922432/css3-animation-is-not-working-on-mozilla-firefox