缓入缓出在firefox中不起作用

Question

为什么我的css转换在firefox中不起作用？我是说轻松进出式？它可以在chrome和safari中工作。我在谷歌上搜索并在stackoverflow上做了研究，我真的，真的希望这不是因为firefox不支持它？

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上改进它。