Existe uma maneira de fazer o seguinte?

Tenho um sprite png transparente que mostra uma imagem padrão à esquerda e uma imagem para o estado: pairar à direit

Existe uma maneira que eu possa fazer com que a imagem desapareça da imagem esquerda para a direita: passe o mouse usando apenas transições css3? Eu tentei o seguinte, mas não funciona:

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

Agora, o texto acima anima o fundo, mostra a imagem. O que eu gostaria, em vez de uma panela, é um efeito de desbotamento ou dissoluçã

ATUALIZAR Acabei criando dois elementos e apenas animando as opacidades separadamente. É um pouco confuso porque tenho que especificar as margens exatas de cada elemento, mas acho que funcionará. Obrigado pela ajuda de todos:)