CSS3 animation is not working on Mozilla firefox [closed]

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.

Closed 9 years ago.

Improve this question

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

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