Wie man Hintergrundbild von CSS3 einblendet Animation

Question

Ich mache ein Menü, dass jedes Element einen Text wie item1, item2 und etc. hat, wenn die Hintergrundfarbe schwebt, der Text transparent wird und ein Hintergrundbild ersetzt wird. Ich habe diesen Code verwendet, um den Stil zu vereinfachen. aber es funktioniert nur für die Hintergrundfarbe und nicht für das Bild. Hier

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

ist die Online-Version: http://jsfiddle.net/q4uHz/

Answer 1

Hintergrundbilder nicht animiert werden können; es gäbe keinen Algorithmus dafür. Eine einfache Lösung ist, dass Sie mit dem Symbol in Ihrem HTML stattdessen mit opacity: 0 einfügen und das animieren. Etwas wie.

<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/