0

http://jsfiddle.net/Lnykg/

画像にカーソルを合わせると、他の画像への遷移がフェードするはずですが、Firefox では遷移が壊れています。top: 0px; を追加してみました。これは同様の質問から提案されましたが、まだ機能しません。

.infidus {
    margin-left: 0px;
    top: 0px;
    width:698px;
    height:300px;
    background: url();
    -moz-transition-duration: 0.7s;
    -webkit-transition-duration: 0.7s;
    transition-duration: 0.7s;
}

.infidus:hover {
    margin-top: 0px;
    top: 0px;
    width:698px;
    height:300px;
    background: url();
    -moz-transition-duration: 0.7s;
    -webkit-transition-duration: 0.7s;
    transition-duration: 0.7s;
}
4

1 に答える 1

0

アニメート可能なプロパティの w3c リストによると、background-image はアニメート可能なプロパティではありません。chrome などの一部のブラウザーは、このクロスフェード動作をサポートしていますが。

Firefox では、バグ 54​​6052がこの種の移行のために登録されています。

ただし、次のリンクで説明されているいくつかのトリックを実行することで、目的を達成できます。

CSS3 背景画像遷移

CSS3 フェード効果

于 2013-11-16T21:04:12.597 に答える