解决CSS动画跨浏览器兼容性问题：基于JavaScript的平滑过渡方案

.fullBackground {
    /* ...其他样式... */
    animation: slideBg 25s linear infinite;
    background-image: url("/assets/slideshowImages/1.jpg");
}

@keyframes slideBg {
    0%, 5%, 10%, 15%, 20% { background-image: url("/assets/slideshowImages/1.jpg"); }
    25%, 30%, 35%, 40%, 45% { background-image: url("/assets/slideshowImages/2.jpg"); }
    50%, 55%, 60%, 65%, 70% { background-image: url("/assets/slideshowImages/3.jpg"); }
    75%, 80%, 85%, 90%, 100% { background-image: url("/assets/slideshowImages/4.jpg"); }
}

<div class="slideshow-container">
  <img class="slides fading" src="https://picsum.photos/id/10/200/300" alt="Slide 1">
  <img class="slides fading" src="https://picsum.photos/id/11/200/300" alt="Slide 2">
  <img class="slides fading" src="https://picsum.photos/id/13/200/300" alt="Slide 3">
  <img class="slides fading" src="https://picsum.photos/id/16/200/300" alt="Slide 4">
</div>

.slideshow-container {
  position: relative; /* 如果需要绝对定位图片，则父容器需相对定位 */
  width: 100%; /* 或固定宽度 */
  height: 100%; /* 或固定高度 */
  overflow: hidden; /* 确保图片超出容器时隐藏 */
}

.slides {
  width: 100%; /* 图片宽度适应容器 */
  height: 100%; /* 图片高度适应容器 */
  display: none; /* 默认隐藏所有图片 */
  position: absolute; /* 绝对定位，使图片层叠 */
  top: 0;
  left: 0;
}

/* 定义淡入淡出动画 */
.fading {
  animation: fading 4s infinite; /* 4s 为一个完整的淡入淡出周期 */
}

@keyframes fading {
  0%   { opacity: 0; } /* 开始时完全透明 */
  25%  { opacity: 1; } /* 25% 时完全不透明，完成淡入 */
  75%  { opacity: 1; } /* 保持不透明状态 */
  100% { opacity: 0; } /* 结束时完全透明，完成淡出 */
}

var myIndex = 0;
carousel(); // 页面加载后立即启动轮播

function carousel() {
  var i;
  var x = document.getElementsByClassName("slides"); // 获取所有带有 'slides' 类的元素

  // 1. 隐藏所有图片
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
    // 移除可能存在的动画类，确保每次显示时动画重新开始
    x[i].classList.remove('fading-active');
  }

  // 2. 更新索引，实现循环播放
  myIndex++;
  if (myIndex > x.length) {
    myIndex = 1; // 当到达最后一张图片后，循环回到第一张
  }

  // 3. 显示当前图片
  x[myIndex - 1].style.display = "block";
  // 添加动画类，触发淡入淡出效果
  x[myIndex - 1].classList.add('fading-active');

  // 4. 设置定时器，在指定时间后再次调用 carousel 函数
  // 这里的 4000 毫秒（4秒）应与 CSS 动画的持续时间保持一致
  setTimeout(carousel, 4000);
}

// 辅助CSS：为JS控制的淡入淡出动画定义
// 当JS添加 'fading-active' 类时，触发淡入动画
.fading-active {
  animation: fading-in 1s forwards; /* 1秒淡入，保持最后状态 */
}

@keyframes fading-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

<div class="slideshow-container">
  <img class="slides" src="https://picsum.photos/id/10/200/300" alt="Slide 1">
  <img class="slides" src="https://picsum.photos/id/11/200/300" alt="Slide 2">
  <img class="slides" src="https://picsum.photos/id/13/200/300" alt="Slide 3">
  <img class="slides" src="https://picsum.photos/id/16/200/300" alt="Slide 4">
</div>

.slideshow-container {
  position: relative;
  width: 30rem; /* 示例宽度 */
  height: 20rem; /* 示例高度 */
  overflow: hidden;
}

.slides {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0; /* 默认透明 */
  transition: opacity 1s ease-in-out; /* 1秒淡入淡出过渡 */
  display: block; /* 始终显示，通过opacity控制可见性 */
}

.slides.active {
  opacity: 1; /* 激活时完全不透明 */
}

var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("slides");

  // 隐藏所有图片（通过设置opacity为0）
  for (i = 0; i < slides.length; i++) {
    slides[i].classList.remove('active'); // 移除active类，使其淡出
  }

  // 更新索引
  slideIndex++;
  if (slideIndex > slides.length) {
    slideIndex = 1;
  }

  // 显示当前图片（通过添加active类，使其淡入）
  slides[slideIndex - 1].classList.add('active');

  // 每4秒切换一次图片
  setTimeout(showSlides, 4000);
}