a:hover (with an id)background image transition not working in firefox and ie

Question

i have some logos which transition on hover but i've always tested with chrome(yeah i messed up)So I just tested it in ff & ie and it's not working (i have the latest versions)

Here is my fiddle http://jsfiddle.net/r6qZw/

and here is the html

<a id="facebook" href="http://facebook.com"></a>

and the css

#facebook {
float: left;
height: 40px;
width: 40px;
background-image: url(http://i.imgur.com/2lAKpSi.jpg);
background-repeat: no-repeat;
background-position: center center;
-o-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-khtml-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}

#facebook:hover {
background-image: url(http://i.imgur.com/L7Jmol5.jpg);
}

I know the solution to this is simple but i just couldn't do it. When i remove the background image and just use a color instead, it works but using background image just stops the animation. I still get the second image but it doesn't transition with an animation. I've also tried giving a parent element (like the famous "ul li a" and such)

Can someone help a noob out?

Answer 1

background-image is not a transitionable property (except for gradients, and that's not supported in Chrome - IE supports it though!)

The fact that Chrome can transition the image for you is simply an extension of the standard. This is evidenced by how horrible it looks if you rapidly move your mouse over and off of it repeatedly - normal transitions are smooth in spite of this, but the image "transition" is horrible.