有没有办法在Firefox中实现图像的平滑过渡？这在 chrome 上效果很好答案

【问题标题】：Is there a way to implement smooth transition of images in firefox? This works well on chrome有没有办法在Firefox中实现图像的平滑过渡？这在 chrome 上效果很好
【发布时间】：2020-08-16 18:15:37
【问题描述】：

也许需要一些 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>

【问题讨论】：

那行不通...您需要更改这些照片的不透明度。这肯定需要 javascript 才能知道哪个图像正在显示，哪个图像在隐藏。

标签： javascript html css image firefox

【解决方案1】：

由于您没有要求仅使用 CSS 解决方案，因此我在这里使用了一些 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>

【讨论】：