CSS Animation support within firefox and IE?

Question

I have CSS animates on my navigation bar when the user hovers over them.

The issue is that they all only work within Chrome. They all have the correct extensions yet nothing happens?

An example of ONE button:

#WhatsWhatButton:hover
{
-webkit-animation-name: sway;
-webkit-animation-duration: 1.5s;
-webkit-animation-fill-mode: both;
-moz-animation-name: sway;
-moz-animation-duration: 1.5s;
-moz-animation-fill-mode: both;
-ms-animation-name: sway;
-ms-animation-duration: 1.5s;
-ms-animation-fill-mode: both;
-o-animation-name: sway;
-o-animation-duration: 1.5s;
-o-animation-fill-mode: both;
animation-name: sway;
animation-duration: 1s;
animation-fill-mode: both;
} 

@-webkit-keyframes sway
{
0% {background:url('Images/Icons/WhatsWhatIcon.png'); background-position: center bottom;background-size: 225px 100px;}
15% {background:url('Images/Icons/WhatsWhatIcon2.png'); background-position: center bottom;background-size: 225px 100px;}
30% {background:url('Images/Icons/WhatsWhatIcon3.png'); background-position: center bottom;background-size: 225px 100px;}
45% {background:url('Images/Icons/WhatsWhatIcon2.png'); background-position: center bottom;background-size: 225px 100px;}
60% {background:url('Images/Icons/WhatsWhatIcon.png'); background-position: center bottom;background-size: 225px 100px;}
75% {background:url('Images/Icons/WhatsWhatIcon4.png'); background-position: center bottom;background-size: 225px 100px;}
90% {background:url('Images/Icons/WhatsWhatIcon5.png'); background-position: center bottom;background-size: 225px 100px;}
100% {background:url('Images/Icons/WhatsWhatIcon4.png'); background-position: center bottom;background-size: 225px 100px;}
}

@-moz-keyframes sway
{
0% {background:url('Images/Icons/WhatsWhatIcon.png'); background-position: center bottom;background-size: 225px 100px;}
15% {background:url('Images/Icons/WhatsWhatIcon2.png'); background-position: center bottom;background-size: 225px 100px;}
30% {background:url('Images/Icons/WhatsWhatIcon3.png'); background-position: center bottom;background-size: 225px 100px;}
45% {background:url('Images/Icons/WhatsWhatIcon2.png'); background-position: center bottom;background-size: 225px 100px;}
60% {background:url('Images/Icons/WhatsWhatIcon.png'); background-position: center bottom;background-size: 225px 100px;}
75% {background:url('Images/Icons/WhatsWhatIcon4.png'); background-position: center bottom;background-size: 225px 100px;}
90% {background:url('Images/Icons/WhatsWhatIcon5.png'); background-position: center bottom;background-size: 225px 100px;}
100% {background:url('Images/Icons/WhatsWhatIcon4.png'); background-position: center bottom;background-size: 225px 100px;}
}

@-ms-keyframes sway
{
0% {background:url('Images/Icons/WhatsWhatIcon.png'); background-position: center bottom;background-size: 225px 100px;}
15% {background:url('Images/Icons/WhatsWhatIcon2.png'); background-position: center bottom;background-size: 225px 100px;}
30% {background:url('Images/Icons/WhatsWhatIcon3.png'); background-position: center bottom;background-size: 225px 100px;}
45% {background:url('Images/Icons/WhatsWhatIcon2.png'); background-position: center bottom;background-size: 225px 100px;}
60% {background:url('Images/Icons/WhatsWhatIcon.png'); background-position: center bottom;background-size: 225px 100px;}
75% {background:url('Images/Icons/WhatsWhatIcon4.png'); background-position: center bottom;background-size: 225px 100px;}
90% {background:url('Images/Icons/WhatsWhatIcon5.png'); background-position: center bottom;background-size: 225px 100px;}
100% {background:url('Images/Icons/WhatsWhatIcon4.png'); background-position: center bottom;background-size: 225px 100px;}
}

@-o-keyframes sway
{
0% {background:url('Images/Icons/WhatsWhatIcon.png'); background-position: center bottom;background-size: 225px 100px;}
15% {background:url('Images/Icons/WhatsWhatIcon2.png'); background-position: center bottom;background-size: 225px 100px;}
30% {background:url('Images/Icons/WhatsWhatIcon3.png'); background-position: center bottom;background-size: 225px 100px;}
45% {background:url('Images/Icons/WhatsWhatIcon2.png'); background-position: center bottom;background-size: 225px 100px;}
60% {background:url('Images/Icons/WhatsWhatIcon.png'); background-position: center bottom;background-size: 225px 100px;}
75% {background:url('Images/Icons/WhatsWhatIcon4.png'); background-position: center bottom;background-size: 225px 100px;}
90% {background:url('Images/Icons/WhatsWhatIcon5.png'); background-position: center bottom;background-size: 225px 100px;}
100% {background:url('Images/Icons/WhatsWhatIcon4.png'); background-position: center bottom;background-size: 225px 100px;}
}

@keyframes sway
{
0% {background:url('Images/Icons/WhatsWhatIcon.png'); background-position: center bottom;background-size: 225px 100px;}
15% {background:url('Images/Icons/WhatsWhatIcon2.png'); background-position: center bottom;background-size: 225px 100px;}
30% {background:url('Images/Icons/WhatsWhatIcon3.png'); background-position: center bottom;background-size: 225px 100px;}
45% {background:url('Images/Icons/WhatsWhatIcon2.png'); background-position: center bottom;background-size: 225px 100px;}
60% {background:url('Images/Icons/WhatsWhatIcon.png'); background-position: center bottom;background-size: 225px 100px;}
75% {background:url('Images/Icons/WhatsWhatIcon4.png'); background-position: center bottom;background-size: 225px 100px;}
90% {background:url('Images/Icons/WhatsWhatIcon5.png'); background-position: center bottom;background-size: 225px 100px;}
100% {background:url('Images/Icons/WhatsWhatIcon4.png'); background-position: center bottom;background-size: 225px 100px;}
}

As you can see, all the keyframes have their extensions as well as initiated it from within #WhatsWhatsButton:hover

Yet it still doesn't animate within IE or Firefox.

For record, i'm running the latest Firefox (V22.0) and IE 10

Answer 1

Firefox and IE10 both support CSS Animations (now even unprefixed, so there is no real need to use -ms- prefix for animations because there is no shipped IE version that need them, and -moz- is probably also safe to remove because Firefox hasn't needed a prefix since version 16). But 'background-image' property is marked in the spec as 'not animatable'. That's why most browsers can't animate (cross-fade) them via CSS, only Chrome has this non-standard feature. Some more info on the topic: CSS3 transition of background-image for Firefox not working

As a workaround, I'd suggest to create 2 layers of background (e.g. element and pseudo-element) and animate the opacity of the top layer.