Есть ли способ реализовать плавный переход изображений в firefox? Это хорошо работает на chrome

Question

Может быть, требуется javascript, пожалуйста, предложите. Вы можете проверить на aditagarwal.com

CSS.

.images-wrapper{

    position: fixed;
    left: 0;
    top: 80px;
    bottom: 0;
    width: 100%;
    height: 100vh;
    animation: animate 16s ease-in-out infinite;// maybe something here
    background-size: cover;

}


@keyframes animate{

    0%,100%{
        background-image: url(coding2.jpeg);

    }
    25%{
        background-image: url(Flowers.png);
    }
    50%{
        background-image: url(Desert.png);
    }
    75%{
        background-image: url(sunset.png);
    }
}

HTML

       <div class="images-wrapper">

        </div>

Answer 1

Поскольку вы не запрашивали решение CSS only, я использовал здесь некоторый код JS, который постоянно изменяет BG. Также проверьте, что я добавил transition:background 1s ease-in, что делает переход особенно плавным.

const elem = document.getElementById("main");

const bg = [
  "https://wallpapercave.com/wp/wp2599605.jpg",
  "https://images.pexels.com/photos/257360/pexels-photo-257360.jpeg"
];

elem.style.backgroundImage = `url(${bg[0]})`;
let i = 0;
setInterval(() => {
  i = i == 1 ? 0 : 1;
  elem.style.backgroundImage = `url(${bg[i]})`;
}, 2000);

div {
  position: fixed;
  left: 0;
  top: 80px;
  bottom: 0;
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-repeat:no-repeat;/*Modified for demo*/
  transition: background 1s ease-in;
}

<div id="main">
</div>