ease-in-out not working in firefox

Question

Why doesn't my css transitions work in firefox? I mean the ease-in-out? It works in chrome and safari. I have googel'd and done research here in stackoverflow and I really, really hope it is not because firefox dosen't support this???

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;
}

the html

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

script

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;
});

you cant transition `background-image`, transitions can be aplied only at numeric values. — Pepo_rasta, Aug 25 '16 at 14:16
see this: http://stackoverflow.com/questions/9483364/css3-background-image-transition — Pepo_rasta, Aug 25 '16 at 14:23

score 0 · Answer 1 · answered Aug 25 '16 at 14:58

Maybe you can try and animate the background position, but that would be hard with 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>

Maybe someone can improve it on this Fiddle.

ease-in-out not working in firefox

1 Answers1