Transition between background images that works the same across all modern browsers?

Question

I'm trying to fade in/out the background images using CSS.

I'm using CSS transitions for this purpose.

-webkit-transition: all 0.9s ease-in-out 0s;
  -moz-transition: all 0.9s ease-in-out 0s;
  -ms-transition: all 0.9s ease-in-out 0s;
  -o-transition: all 0.9s ease-in-out 0s;
  transition: all 0.9s ease-in-out 0s;

The code above works fine in Chrome but it doesn't not work at all in Firefox at all!

A WORKING FIDDLE

Click on the 'Apple' text to view the transition in chrome.

Could someone please advice on this issue?

@TemaniAfif, very good question. No. i have 3 different images. but I just minified my code for the purpose of this question. — James Juanjie, Sep 27 '18 at 19:39
It's because firefox doesn't yet support `background-image` as an [animate-able property](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties) but there's simple workarounds possible. — Chris W., Sep 27 '18 at 19:46
@ChrisW. can you please let me know the possible workaround? — James Juanjie, Sep 27 '18 at 19:47
Here's [some options](https://stackoverflow.com/questions/9483364/css3-background-image-transition) or I can make something custom later when I have more time, either way cheers and welcome to SO :) — Chris W., Sep 27 '18 at 20:20
@ChrisW. cheers. absolutely nothing works. all of those Answers in your link mention 1 or 2 browsers that their solution wont work in. I need something that works across all browsers. — James Juanjie, Sep 27 '18 at 20:29

Temani Afif · Answer 1 · 2018-09-27T20:47:24.157

You can consider pseudo element in order to create different layer then you can use opacity for the fade:

$('.box').click(function() {
  $(this).toggleClass('animate');
});

.box {
  margin: 10px;
  width: 200px;
  height: 200px;
  background: url(https://picsum.photos/200/300?image=1069);
  position: relative;
  z-index: 0;
}

.box:before,
.box:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1;
}

.box:before {
  background: url(https://picsum.photos/200/300?image=1045);
  transition: 0.5s;
}

.box:after {
  background: url(https://picsum.photos/200/300?image=1049);
  transition: 0.5s 0.5s;
}

.box.animate::before {
  opacity: 0;
  transition: 0.5s 0.5s;
}
.box.animate::after {
  opacity: 0;
  transition: 0.5s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">

</div>

And in case you want another kind of animation you can play with background-size and multiple background:

.box {
  margin: 10px;
  width: 200px;
  height: 200px;
  background-image: 
    url(https://picsum.photos/200/200?image=1069),
    url(https://picsum.photos/200/200?image=1045),
    url(https://picsum.photos/200/200?image=1049),
    url(https://picsum.photos/200/200?image=1051);
 background-size:100% 100%;
 background-position:center;
 background-repeat:no-repeat;
}
.box:hover {
  animation:change 2s linear forwards;
}
@keyframes change {
  0%  {background-size:100% 100%,100% 100%,100% 100%,100% 100%;}
  25% {background-size:0    0   ,100% 100%,100% 100%,100% 100%;}
  50% {background-size:0    0   ,0    0   ,100% 100%,100% 100%;}
  75% {background-size:0    0   ,0    0   ,0    0   ,100% 100%;}
  100%{background-size:0    0   ,0    0   ,0    0   ,0    0;}
}

<div class="box">

</div>

You can also adjust background-position to create different way of transition:

.box {
  margin: 10px;
  width: 200px;
  height: 200px;
  background-image: 
    url(https://picsum.photos/200/200?image=1069),
    url(https://picsum.photos/200/200?image=1045),
    url(https://picsum.photos/200/200?image=1049),
    url(https://picsum.photos/200/200?image=1051);
 background-size:100% 100%;
 background-position:left;
 background-repeat:no-repeat;
}
.box:hover {
  animation:change 2s linear forwards;
}
@keyframes change {
  0%  {background-size:100% 100%,100% 100%,100% 100%,100% 100%;}
  25% {background-size:0    100%,100% 100%,100% 100%,100% 100%;}
  50% {background-size:0    100%,0    100%,100% 100%,100% 100%;}
  75% {background-size:0    100%,0    100%,0    100%,100% 100%;}
  100%{background-size:0    100%,0    100%,0    100%,0    100%;}
}

<div class="box">

</div>

How can i use this menthod using a jquery click function similar to what I have in my example? — James Juanjie, Sep 27 '18 at 20:39
@JamesJuanjie I used the hover state, so simply change the hover with a class and add that class — Temani Afif, Sep 27 '18 at 20:41
@JamesJuanjie I updated the code to add click event and added another method — Temani Afif, Sep 27 '18 at 20:43
its nice but what i need to do is to change the background image based on which button is clicked. But your examples, uses before/after and it goes through the whole images after the click/hover.. — James Juanjie, Sep 27 '18 at 21:01
Basically, I have 3 buttons and each button should change the background image to a different image. — James Juanjie, Sep 27 '18 at 21:02
@JamesJuanjie you can adjust it :) it's a simple example .. you can fade only the after, or only the before, or both, etc .. you are free. You have 3 layers and you can do what you want — Temani Afif, Sep 27 '18 at 21:02
I understand. and I have tried that: https://jsfiddle.net/r4n03of5/ but I don't understand how I can use multiple buttons. — James Juanjie, Sep 27 '18 at 21:04
still not exactly what i am trying to do. because with that code, I can only have two buttons. my attempt: https://jsfiddle.net/r4n03of5/2/ Also, there is a flashinng/blinking of the first image between the fade in/out animation. — James Juanjie, Sep 27 '18 at 21:33
@JamesJuanjie no need `three` class, simply remove one and two .. here is https://jsfiddle.net/r4n03of5/3/ — Temani Afif, Sep 27 '18 at 21:46

Transition between background images that works the same across all modern browsers?

1 Answers1