背景画像にCSS変換を追加するときに問題が発生する

Question

シンプルなWebページを作成していて、背景画像が変更されたときにCSSにフェードアニメーションを追加できません。私は誰が取ることができれば、私は、私のCSSと以下のhtmlへのリンクを入れます

-webkit-transition: background 1s ease-in-out; 
-moz-transition: background 1s ease-in-out; 
-o-transition: background 1s ease-in-out; 
-ms-transition: background 1s ease-in-out; 
transition: background 1s ease-in-out; 

...私はこれらの線に沿って何かを使用する必要がありますが、私はそれをしようとするたびに、動作するようには思えない知っています一見、私は:)

CSSに非常に感謝される：http://pastebin.com/9k1tSiAE HTML：http://pastebin.com/2K7GFWjN

Answer 1

問題は、あなたは、単に背景自体のプロパティを変更することに加えて、背景画像を変更しているです。私はいくつかのランダムな背景タイルでバイブルをセットアップしました。あなたは、背景のスライドが表示されますが、画像は移行せずにすぐに変更されます。

http://jsfiddle.net/jimjeffers/a2jAF/

あなたは、バックグラウンドのために一枚の画像に落ち着くが、今あなたが持っている必要があります3：

background-image:url(nav-bg-initial.png); 
background-image:url(nav-bg-secondry.png); 
background-image:url(nav-bg-tertiary.png); 

それらを1つのスプライトに凝縮する必要があります。しかし、背景にトランジションを適用して背景の位置を調整すると、背景がフェードするのではなくスライドします。したがって、あなたが行っている効果に応じて、背景を切り替えることがあなたにとって最良の選択肢ではないかもしれません。

代わりに、いくつかのネストされた空のコンテナ要素を使用する必要があります。それは意味的にいいわけではありませんが、クロスフェードを実行するためにCSSトランジションを使用したい場合、あなたが望むものを達成することができます。

<ul id="navigation-list"> 
    <li><a class="navigation-button" id="nav-button-1" href="#">HOME</a><span class="initial"></span><span class="secondary"></span><span class="tertiary"></span></li> 
    ... 
</ul> 

CSSは次のようになります。

.navigation-button { position: relative; } 
.initial, .secondary, .tertiary { 
    bottom: 0; 
    left: 0; 
    opacity: 0; 
    position: absolute 
    right: 0; 
    top: 0; 
    -webkit-transition: opacity 1s ease-in-out; 
     -moz-transition: opacity 1s ease-in-out; 
    -o-transition: opacity 1s ease-in-out; 
    -ms-transition: opacity 1s ease-in-out; 
    transition: opacity 1s ease-in-out; 
    z-index: -1; 
} 

.initial { background-image:url(nav-bg-initial.png); } 
.secondary { background-image:url(nav-bg-secondry.png); z-index: -2; } 
.tertiary { background-image:url(nav-bg-tertiary.png); z-index: -3; } 

そしてあなたは、このような外見を切り替えたい：

#navigation-buttons:hover #nav-button-1 .tertiary { opacity: 1; } 

それは少しより多くの仕事ですが、あなたがしなければならないだろうそれらの線に沿った何かがスライド効果を得ずに様々な位置で異なる背景画像をクロスフェードする。