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

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 divs 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