Firefox中Div背景图片淡入淡出动画失效问题求助

我实现了一个带轮播背景图的Div元素，该效果在Safari浏览器及安卓移动端可正常运行，但在Firefox浏览器中淡入效果未显示，仅能看到背景图的阶跃切换。原代码如下：

原问题代码 #

@keyframes fadeBG {
  25% {
    background-image: url("https://source.unsplash.com/1110x220/?beach");
  }
  50% {
    background-image: url("https://source.unsplash.com/1110x220/?castle");
  }
  75% {
    background-image: url("https://source.unsplash.com/1110x220/?lake");
  }
}

.jumbotron {
  background-image: url('https://source.unsplash.com/1110x220/weekly');
  background-position: center;
  background-size: cover;
  animation: fadeBG 16s cubic-bezier(0.75, 0, 0.15, 1) infinite;
  box-shadow: 0 -100vh rgba(0, 0, 0, 0.2) inset;
  color: white;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="jumbotron my-2">
    <h1>Background Slideshow</h1>
    <p>CSS only animated slideshow</p>
  </div>
</div>

问题原因 #

Firefox严格遵循CSS规范，background-image属于离散属性（非可插值属性），无法进行平滑过渡动画，仅能实现阶跃式的图片切换。而Safari等浏览器通过私有实现支持了非标准的background-image动画，因此能正常显示淡入效果。

解决方案 #

改用**可插值属性（如opacity）**实现跨浏览器兼容的淡入轮播。推荐使用「伪元素+子元素叠加」的方式，每个元素承载一张背景图，通过动画控制透明度和层级实现平滑切换。

修改后的代码

.jumbotron {
  position: relative;
  background-image: url('https://source.unsplash.com/1110x220/weekly');
  background-position: center;
  background-size: cover;
  box-shadow: 0 -100vh rgba(0, 0, 0, 0.2) inset;
  color: white;
  overflow: hidden;
}

/* 轮播背景层：伪元素+子元素实现3张图的叠加 */
.jumbotron::before,
.jumbotron::after,
.jumbotron .bg-layer {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  opacity: 0;
  animation: fadeBG 16s cubic-bezier(0.75, 0, 0.15, 1) infinite;
  z-index: -1;
}

/* 分配每张图的资源与动画延迟 */
.jumbotron::before {
  background-image: url("https://source.unsplash.com/1110x220/?beach");
  animation-delay: 4s;
}

.jumbotron::after {
  background-image: url("https://source.unsplash.com/1110x220/?castle");
  animation-delay: 8s;
}

.jumbotron .bg-layer {
  background-image: url("https://source.unsplash.com/1110x220/?lake");
  animation-delay: 12s;
}

/* 透明度过渡动画 */
@keyframes fadeBG {
  0%, 20% {
    opacity: 0;
  }
  25%, 45% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
    z-index: -2; /* 切换后降级层级，避免遮挡后续图层 */
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="jumbotron my-2">
    <div class="bg-layer"></div>
    <h1>Background Slideshow</h1>
    <p>CSS only animated slideshow</p>
  </div>
</div>

方案说明

• 利用opacity的平滑过渡实现淡入淡出，所有现代浏览器（包括Firefox）均支持该属性的动画效果。
• 通过animation-delay控制每张图的轮播顺序，确保切换节奏符合预期。
• 动画结束后降低z-index，避免已隐藏的背景层遮挡当前显示的图层。

内容的提问来源于stack exchange，提问作者MIBE