0
@-webkit-keyframes animation{
0%{background-image:url(img/bg.jpg);}
25%{background-image:url(img/bg1.jpg);}
50%{background-image:url(img/bg2.jpg);}
75%{background-image:url(img/bg3.jpg);}
100%{background-image:url(img/bg4.jpg);}
}

I already know about changing the -webkit- with -moz- and all, it's not what i'm asking, i just want to know how to get this to work on Mozilla and Explorer, because for some reason i don't understand it doesn't

1 Answers1

0

Unfortunately, background images cannot be changed in @keyframes animations.(Except in Chrome) The reason is that images cannot be changed step-by-step Like background colors. Your best bet would be to place all the images on top of each other using position:absolute; and then change their opacity using @keyframes. A SO question about it can be found here
Making CSS slideshows using opacity is a little harder and requires more coding but are still quite easy. There are some good tutorials out there about it- try these:
http://themarklee.com/2013/10/16/simple-crossfading-slideshow-css/
http://cssnerd.com/2011/10/04/pure-css3-slideshow/ There is also some really neat thing you can do using some jquery as well:
http://css3.bradshawenterprises.com/cfimg/

Community
  • 1
  • 1
Jacob G
  • 13,762
  • 3
  • 47
  • 67
  • I'm sorry but it's not about the browser tag, i tried everything, i think i need to add something inside the script to make it work on the other browsers, because the images doesn't even appear in them! –  Jul 15 '14 at 22:14
  • Yes it works fine, that's why i'm freaking out! and i have to submit the job one hour from now, so any help is appreciated –  Jul 15 '14 at 22:26
  • @Information_For_Sell i have updated my answer. As you can see, you cannot use keyframes.:( The good news is you can easily put one together in an hour using only css. If you need any help, just ask.:) – Jacob G Jul 15 '14 at 22:30
  • @Information_For_Sell [Use this. just add the vendor prefixes, your own images and your text](http://jsfiddle.net/ImagineStudios/YpHx6/2/) – Jacob G Jul 15 '14 at 22:35