CSS3アニメーションで背景イメージをフェードインする方法

Question

私は、各アイテムに、背景色の変更をホバリングし、テキストが透明になり、背景イメージを置き換えるitem1、item2などのテキストを持つメニューを作成しています。私はこのコードを使用してスタイルを出し入れしました。しかし、それは背景色ではなく画像でのみ機能します。ここで

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

はオンライン版である： http://jsfiddle.net/q4uHz/

Answer 1

背景画像をアニメーション化することはできません。そのためのアルゴリズムはありません。簡単な解決策は、opacity: 0を使ってアイコンに<img>を追加し、それをアニメーション化することです。何かのようなもの。

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