Css3 animation doesn't work on firefox (background faded)

Question

I wrote animation of changing background and it work every browser besides firefox. On FF background is changing but without animation effect. I tried out @-webkit-keyframes but it didn't helped. Thats the code: https://jsfiddle.net/tkw5pfm8/

Answer 1

background-image fade animation in FF is really disables. You will have to use separate div s with background-image for that

 * { box-sizing: border-box; } html { height: 100%; } body { min-height: 100%; margin: 0; padding: 0; }.background { width: 100%; height: 100%; position: absolute; }.background>div { width: 100%; height: 100%; position: absolute; background-size: cover; background-position: center; }.slide1 { background-image: url(https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569__340.jpg); animation: fade 8s infinite; }.slide2 { background-image: url(https://c4.wallpaperflare.com/wallpaper/246/739/689/digital-digital-art-artwork-illustration-abstract-hd-wallpaper-thumb.jpg); animation: fade2 8s infinite; }.slide3 { background-image: url(https://wallpaperplay.com/walls/full/c/5/3/34778.jpg); animation: fade3 8s infinite; } @keyframes fade { 0% { opacity: 1 } 33.333% { opacity: 0 } 66.666% { opacity: 0 } 100% { opacity: 1 } } @keyframes fade2 { 0% { opacity: 0 } 33.333% { opacity: 1 } 66.666% { opacity: 0 } 100% { opacity: 0 } } @keyframes fade3 { 0% { opacity: 0 } 33.333% { opacity: 0 } 66.666% { opacity: 1 } 100% { opacity: 0 } }

 <div class='background'> <div class='slide1'></div> <div class='slide2'></div> <div class='slide3'></div> </div>

Or better, use some simple JS slider, like Swiper

https://swiperjs.com/demos/#fade_effect