CSS Fade Between Background Images on Hover

Могу ли я сделать следующее?

У меня есть прозрачный спрайт png, который показывает стандартное изображение слева и изображение для: hover состояние справа.

Есть ли способ, которым я могу заставить изображение плавно переходить с левого изображения на правое на: hover, используя только переходы css3? Я пробовал следующее, но это не сработало:

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

Теперь вышеупомянутое анимирует фон, оно перемещает изображение по горизонтали. Вместо панорамирования я бы хотел эффект затухания или растворения.

ОБНОВЛЕНИЕ: В итоге мне пришлось создать два элемента и просто анимировать непрозрачность по отдельности. Это немного беспорядочно, потому что мне нужно указать точные поля каждого элемента, но я думаю, это сработает. Спасибо за помощь :)