0

I have a pretty simple animation that changes the background image of a div.

@-moz-keyframes slider {
0%   {  background-image: url('../img/slide1.jpg');}
25%  {  background-image: url('../img/slide2.jpg');}
50%  {  background-image: url('../img/slide2.jpg');}
75%  {  background-image: url('../img/slide1.jpg');}
100% {  background-image: url('../img/slide1.jpg');}
}

#mydiv {
height: 400px;
width: 500px;
background-size: cover;

-moz-animation: slider 10s infinite;
}
/*I obviously have the -o-, -webkit- and normal there too, just keeping it short*/

It works fine in Chrome but won't work in Firefox (or IE). The background just stays white. The other animations I have (moving text and stuff) work fine in both, and they are written the same way. This one just won't. Any ideas?

Chumppe
  • 27
  • 6
  • Can you post a JSFiddle of it please ? – Vincent G Apr 01 '16 at 10:48
  • The blending/interpolation of `background-image` not yet in the specs (only as draft), it is right now a Chrome (maybe Webkit/Blink) only feature. See: [Image transitions not working in firefox](http://stackoverflow.com/questions/19985365) and [Bug 546052: Support CSS transitions with background-image images (cross-fade())](https://bugzilla.mozilla.org/show_bug.cgi?id=546052) – t.niese Apr 01 '16 at 10:49
  • https://jsfiddle.net/hoqd0z7s/ there you go, same concept at least – Chumppe Apr 01 '16 at 10:55
  • @t.niese I see, so I should probably do it in javascript then huh? – Chumppe Apr 01 '16 at 10:56
  • Either you use JS. Or you create for each image you want to blend a layer and use keyframes on the `opacity` of those layers to blend. – t.niese Apr 01 '16 at 11:51

0 Answers0