ファイアウォックスでの取り込みが容易でない

Question

なぜ私のCSSの移行はFirefoxで動作しないのですか？私はイージー・イン・アウトを意味しますか？それはクロムとサファリで動作します。 私はgoogel'dとstackoverflowでここで研究を行って、私は本当に、それはFirefoxのdosen'tがこれをサポートしていないので、本当に願っていますか？

CSS

body{ 
    background: url("../img/background.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    overflow-y: hidden; 
    -webkit-transition: background ease-in-out 0.5s; 
    -moz-transition: background ease-in-out 0.5s; 
    -o-transition: background ease-in-out 0.5s; 
    transition: background ease-in-out 0.5s; 
} 

.background-0 { 
    background: url("../img/ff.jpg") no-repeat center center fixed; 
} 
.background-1 { 
    background: url("../img/ddd.jpg") no-repeat center center fixed; 
} 
.background-2 { 
    background: url("../img/hh.jpg") no-repeat center center fixed; 
} 

.background-0, 
.background-1, 
.background-2{ 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

HTML

<ul> 
    <li>one</li> 
    <li>two</li> 
    <li>three</li> 
</ul> 

スクリプトが

var list_elements = $('ul li'); 
var current_index = null; 
list_elements.on('mouseenter', function() { 
    current_index = list_elements.index(this); 
    $('body').addClass('background-' + current_index); 

}).on('mouseleave', function(){ 
    $('body').removeClass('background-' + current_index); 
    current_index = null; 
}); 

Answer 1

たぶん、あなたは試してみて、アニメーションの背景の位置を、それはbackground-position: coverと難しいだろうことができます。

var list_elements = $('ul li'); 
 
var current_index = null; 
 
list_elements.on('mouseenter', function() { 
 
    current_index = list_elements.index(this); 
 
    $('body').addClass('background-' + current_index); 
 

 
}).on('mouseleave', function() { 
 
    $('body').removeClass('background-' + current_index); 
 
    current_index = null; 
 
});

body { 
 
    background: url("https://placehold.it/1250x550/000000") no-repeat 50% 50% fixed, 
 
     url("https://placehold.it/1250x550/ff0000") no-repeat 50% 50% fixed, 
 
     url("https://placehold.it/1250x550/00ff00") no-repeat 50% 50% fixed, 
 
     url("https://placehold.it/1250x550/0000ff") no-repeat 50% 50% fixed; 
 
    transition: all ease-in-out 0.5s; 
 
    color: #fff; 
 
} 
 
.background-0 { 
 
    background: url("https://placehold.it/1250x550/000000") no-repeat -2000px 50% fixed, 
 
     url("https://placehold.it/1250x550/ff0000") no-repeat 50% 50% fixed, 
 
     url("https://placehold.it/1250x550/00ff00") no-repeat 50% 50% fixed, 
 
     url("https://placehold.it/1250x550/0000ff") no-repeat 50% 50% fixed; 
 
} 
 
.background-1 { 
 
    background: url("https://placehold.it/1250x550/000000") no-repeat -2000px 50% fixed, 
 
     url("https://placehold.it/1250x550/ff0000") no-repeat -2000px 50% fixed, 
 
     url("https://placehold.it/1250x550/00ff00") no-repeat 50% 50% fixed, 
 
     url("https://placehold.it/1250x550/0000ff") no-repeat 50% 50% fixed; 
 
} 
 
.background-2 { 
 
    background: url("https://placehold.it/1250x550/000000") no-repeat -2000px 50% fixed, 
 
     url("https://placehold.it/1250x550/ff0000") no-repeat -2000px 50% fixed, 
 
     url("https://placehold.it/1250x550/00ff00") no-repeat -2000px 50% fixed, 
 
     url("https://placehold.it/1250x550/0000ff") no-repeat 50% 50% fixed; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li>Red</li> 
 
    <li>Green</li> 
 
    <li>Blue</li> 
 
</ul>

たぶん誰かがthis Fiddleにそれを改善することができます。