如何用CSS实现3张GIF图无过渡延迟的无限轮播显示

问题分析 #

当前代码存在几个核心问题：

• 动画关键帧设置了淡入淡出过渡，不符合「直接切换无延迟」的要求
• WebKit前缀动画写法错误（应为@-webkit-keyframes而非-webkit-@keyframes）
• 关键帧百分比与7秒每张的时间轴不匹配，导致轮播节奏混乱
• 最核心的：GIF在隐藏（opacity:0）时仍在后台播放，切换回时无法从头开始，造成时间不同步

方案1：纯CSS优化（适合GIF循环时长=7秒的场景） #

如果每张GIF本身循环时长刚好是7秒，可通过以下修正实现精准无过渡轮播：

.images {
  position: relative; /* 确保绝对定位的图片在容器内 */
  margin: auto;
  width: /* 替换为GIF实际宽度 */;
  height: /* 替换为GIF实际高度 */;
}

.images img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 用visibility+opacity实现瞬间切换，visibility控制交互性 */
  opacity: 0;
  visibility: hidden;
  animation: switch 21s infinite linear;
  -webkit-animation: switch 21s infinite linear;
}

/* 修正WebKit前缀写法 */
@-webkit-keyframes switch {
  0%, 33.33% {
    opacity: 1;
    visibility: visible;
  }
  33.34%, 100% {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes switch {
  0%, 33.33% {
    opacity: 1;
    visibility: visible;
  }
  33.34%, 100% {
    opacity: 0;
    visibility: hidden;
  }
}

#img1 {
  animation-delay: 0s;
  -webkit-animation-delay: 0s;
}

#img2 {
  animation-delay: -7s;
  -webkit-animation-delay: -7s;
}

#img3 {
  animation-delay: -14s;
  -webkit-animation-delay: -14s;
}

HTML保持不变，注意给.images设置固定宽高，避免布局混乱。

方案2：JavaScript控制（彻底解决GIF同步问题） #

如果GIF循环时长不等于7秒，或需要每次切换时GIF从头播放，必须用JS控制：

<div class="images">
  <img id="img1" src="https://example.com/gif-1.gif" class="active">
  <img id="img2" src="https://example.com/gif-2.gif">
  <img id="img3" src="https://example.com/gif-3.gif">
</div>

<script>
const images = document.querySelectorAll('.images img');
let currentIndex = 0;
const intervalTime = 7000; // 7秒

// 初始化隐藏非首图
images.forEach((img, index) => {
  if (index !== 0) {
    img.style.display = 'none';
  }
});

setInterval(() => {
  // 隐藏当前图
  images[currentIndex].style.display = 'none';
  // 更新索引
  currentIndex = (currentIndex + 1) % images.length;
  // 重置GIF并显示
  const currentImg = images[currentIndex];
  // 通过添加随机参数强制重新加载GIF，实现从头播放
  const src = currentImg.src.split('?')[0];
  currentImg.src = `${src}?t=${Date.now()}`;
  currentImg.style.display = 'block';
}, intervalTime);
</script>

对应的CSS简化：

.images {
  margin: auto;
  position: relative;
  width: /* 替换为GIF宽度 */;
  height: /* 替换为GIF高度 */;
}

.images img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

这种方法每次切换时都会重新加载GIF，确保每次显示都是从头开始，彻底解决时间同步问题。

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