CSS背景图动画无淡入淡出效果仅直接切换，该如何修复？

• CSS 中background-image属性属于离散属性，不支持过渡动画，浏览器不会为该属性的变化生成中间过渡帧，只会在关键帧节点直接切换状态，因此你看不到淡入淡出效果。
• 你当前的动画规则仅定义了不同关键帧的图片状态，没有引入透明度渐变的控制逻辑，自然无法生成过渡效果。

无需修改HTML结构，仅调整CSS即可实现淡入淡出切换，原理是把所有图片提前作为多层背景加载，通过调整背景层的叠放顺序配合隐式的透明度过渡实现效果：

.slider{
  width: 300px;
  height: 400px;
  background-repeat: no-repeat;
  background-size: 300px 300px;
  /* 同时加载所有图片，按顺序叠放，初始仅显示最上层的第一张 */
  background-image: 
    url("images/flip1.png"),
    url("images/flip2.png"),
    url("images/flip3.png"),
    url("images/flip4.png");
  /* 按需添加infinite实现循环播放 */
  animation: slide 20s ease-in-out infinite;
}

@keyframes slide{
  25%{
    /* 第一张移到最下层，显示第二张，过渡阶段会自动产生淡入淡出效果 */
    background-image: 
      url("images/flip2.png"),
      url("images/flip3.png"),
      url("images/flip4.png"),
      url("images/flip1.png");
  }
  50%{
    background-image: 
      url("images/flip3.png"),
      url("images/flip4.png"),
      url("images/flip1.png"),
      url("images/flip2.png");
  }
  75%{
    background-image: 
      url("images/flip4.png"),
      url("images/flip1.png"),
      url("images/flip2.png"),
      url("images/flip3.png");
  }
  100%{
    background-image: 
      url("images/flip1.png"),
      url("images/flip2.png"),
      url("images/flip3.png"),
      url("images/flip4.png");
  }
}

如果需要调整过渡速度，可修改动画总时长，或者拆分关键帧增加过渡区间的控制。

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