CSS3 Animation Is Not Working On Mozilla Firefox

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

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