Come dissolvenza nell'immagine di sfondo di CSS3 Animazione

Question

Sto creando un menu in cui ogni elemento ha un testo come elemento1, elemento2 e così via in hover il colore dello sfondo cambia, il testo diventa trasparente e l'immagine di sfondo sostituisce. Ho usato questo codice per facilitare dentro e fuori lo stile. ma funziona solo per il colore di sfondo e non per l'immagine.

#nav li:hover { 
    color:transparent !important; 
    text-shadow: none; 
    background-color: rgba(255, 0, 0, .5); 

    -webkit-transition: all 1s ease-in; 
    -moz-transition: all 1s ease-in; 
    -o-transition: all 1s ease-in; 
    -ms-transition: all 1s ease-in; 
    transition: all 1s ease-in; 
} 

Ecco la versione online: http://jsfiddle.net/q4uHz/

Answer 1

Le immagini di sfondo non possono essere animati; non ci sarebbe alcun algoritmo per questo. Una soluzione semplice è includere <img> con l'icona nel codice HTML invece con opacity: 0 e animarlo. Qualcosa di simile a.

<li id="home"> 
<img src="http://cdn3.iconfinder.com/data/icons/picons-social/57/16-apple-48.png"> 
<a href="#home">Home</a></li> 

#nav li { 
    position: relative; 
} 
#nav li img { 
    opacity: 0; 
    position: absolute; 
    transition: all 1s ease-in; 
    top: 0; 
    left: 0; 
} 
#nav li:hover img { 
    opacity: 1; 
} 

http://jsfiddle.net/ExplosionPIlls/q4uHz/1/