使用CSS Keyframe Animations实现自动轮播幻灯片的配置问题

现存问题 #

• 资源路径拼写错误：初始默认背景图后缀为.jpg，关键帧0%对应文件名多写了一个o、后缀变为.jpeg，路径不匹配会导致首屏加载异常、动画跳变
• 动画属性冗余：animation简写中已经定义了速度曲线为linear，后续单独声明的animation-timing-function: ease-in-out会覆盖前者，属于无效冗余代码
• 兼容性缺陷：background-image本身不属于W3C规定的可动画属性，部分浏览器仅支持生硬切换，不会出现平滑过渡效果

修复后可直接运行代码 #

HTML代码 #

<div id="SLIDE_BG"></div>

CSS代码 #

#SLIDE_BG {
  width: 100%;
  height: 100vh;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  backface-visibility: hidden;
  /* 调整总时长为20s，每张图停留4s，切换更自然 */
  animation: slideBg 20s ease-in-out infinite 0s;
  background-image: url('/assets/images/jack-test/beatles-one.jpeg');
}

@keyframes slideBg {
  0% {
    background-image: url('/assets/images/jack-test/beatles-one.jpeg');
  }
  20% {
    background-image: url('/assets/images/jack-test/beatles-two.jpeg');
  }
  40% {
    background-image: url('/assets/images/jack-test/jimi-hendix.jpeg');
  }
  60% {
    background-image: url('/assets/images/jack-test/led-zeppelin.jpeg');
  }
  80% {
    background-image: url('/assets/images/jack-test/rock-band.jpeg');
  }
  100% {
    background-image: url('/assets/images/jack-test/beatles-one.jpeg');
  }
}

优化建议（实现全浏览器兼容的平滑淡入淡出效果） #

如果需要所有浏览器都支持平滑过渡，可以改为用多层div叠加、分别控制opacity的方案，比直接动画background-image兼容性更好。

/* 父容器定位 */
.slide-container {
  width: 100%;
  height: 100vh;
  position: relative;
}
/* 每张幻灯片公共样式 */
.slide-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  animation: fade 20s infinite;
  opacity: 0;
}
/* 分别给每个幻灯片设置延迟和背景图 */
.slide-item:nth-child(1) {
  background-image: url('/assets/images/jack-test/beatles-one.jpeg');
}
.slide-item:nth-child(2) {
  background-image: url('/assets/images/jack-test/beatles-two.jpeg');
  animation-delay: 4s;
}
.slide-item:nth-child(3) {
  background-image: url('/assets/images/jack-test/jimi-hendix.jpeg');
  animation-delay: 8s;
}
.slide-item:nth-child(4) {
  background-image: url('/assets/images/jack-test/led-zeppelin.jpeg');
  animation-delay: 12s;
}
.slide-item:nth-child(5) {
  background-image: url('/assets/images/jack-test/rock-band.jpeg');
  animation-delay: 16s;
}
@keyframes fade {
  0% { opacity: 0; }
  10% { opacity: 1; }
  20% { opacity: 1; }
  30% { opacity: 0; }
  100% { opacity: 0; }
}

对应的HTML改为：

<div class="slide-container">
  <div class="slide-item"></div>
  <div class="slide-item"></div>
  <div class="slide-item"></div>
  <div class="slide-item"></div>
  <div class="slide-item"></div>
</div>

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