CSS Fade Between Background Images on Hover

Question

Is there a way that I can do the following?

I have a transparent png sprite that shows a standard picture on the left, and a picture for the :hover state on the right.

Is there a way that I can have the image fade from the left image into the right image on :hover using only css3 transitions? I've tried the following, but it doesn't work:

li{-webkit-transition:all 0.5s linear; -moz-transition:all 0.5s linear; -o-transition:all 0.5s linear; transition:all 0.5s linear;}
li{background:url(/img/sprites.png) 0 -50px no-repeat;}
li:hover{background:url(/img/sprites.png) 0 -150px no-repeat;}

Now, the above does animate the background, it pans the image across. What I'd like instead of a pan is a fade or dissolve effect.

UPDATE: I ended up having to create two elements and just animate the opacities separately. It's a tad messy because I have to specify the exact margins of each element, but I guess it'll work. Thanks for everyones help :)

Answer 1

The latest news on this topic:

Chrome 19 and newer supports background-image transitions:

Demo: http://dabblet.com/gist/1991345

Additional info: http://oli.jp/2010/css-animatable-properties/

Answer 2

You haven't specified any code to do the actual transition.

http://css3.bradshawenterprises.com/cfimg1/

Try this out in your hover style:

-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out; 
transition: opacity 1s ease-in-out;