FirefoxまたはInternet ExplorerでCSS3の移行が機能しない

Question

私は小規模なビジネスページを作成しています。ナビゲーションボタンのために作成した背景画像があります。私は彼らが画像の上を浮遊するときの移行効果を持つことを望みます。 Chromeで動作しますが、FirefoxやInternet Explorerでコードが機能しない理由がわかりません。

.nav li a.active { 
    background-image: url('../images/02amainhover.png'); 
    background-color: transparent; 
    background-repeat: no-repeat; 
    background-attachment: center center; 
    width: 245px; 
    height: 74px; 
    left: 72px; 
    top: 432px; 
    position: fixed; 
    transition: all .8s ease-out; 
    -moz-transition: all .8s ease-out; 
} 
.nav li a.active:hover { 
    background-image: url('../images/03amainhover.png'); 
    background-color: transparent; 
    background-repeat: no-repeat; 
    background-attachment: center center; 
    width: 245px; 
    height: 74px; 
    left: 72px; 
    top: 432px; 
    position: fixed; 
    transition: all .8s ease-in; 
    -moz-transition: all .8s ease-in; 
} 

Answer 1

いくつかのもの。第一に、あなたはあまりにも多くのコードを繰り返すことがあります。あなたがそれを変更するように言うまで、ウェブサイトは同じコードを想定しているので、それらのスタイルをすべてコピーするのは無意味です。移行したいもので更新するだけで済みます。つまり、背景画像を変換することはできません。​​

Answer 2

位置を持つ2つの画像を作成することができます：絶対および異なるZ-インデックス。上の画像は不透明度が1から0に変わる可能性があります。これはすべてのブラウザで機能します。

Answer 3

@Chris Stanleyが指摘しているように、背景画像を変えることはできません。

あなたの移行がどのように見えるかによって、多くのオプションがあります。私はイメージを見ていない。

• あなたは一方から他方へ（瞬時）filters
• あなたは、単一の画像ファイル（グリッド、トップ/ボトムなど）で複数の画像を合成し、その後に「移動」の背景の位置を使用することができます使用することができます。これを他のトランジションやフィルターと組み合わせて、追加のエフェクトを加えることができます。これはかなり古いトリックで、トランジションとフィルターが追加されて新しいツイストを加えることができます。 （画像を見た後）

EDIT： あなたの新しいコードは次のようになります。

.nav li a.active { 
    background-image: url('../images/02amainhover.png'); 
    background-color: transparent; 
    background-repeat: no-repeat; 
    background-attachment: center center; 
    width: 245px; 
    height: 74px; 
    left: 72px; 
    top: 432px; 
    position: fixed; 
    transition: all 0.8s ease-out; 

    box-shadow:0px 0px 2px 2px rgba(0,0,0,0.5); 

} 

.nav li a.active:hover { 

    filter: invert(100%); 
    transition: all 0.8s ease-in; 
} 

（私はあなたがいずれかのもう-moz-transitionを必要としないと思います。）