如何仅用CSS实现悬停触发无过渡切换的图片轮播？

我想仅用CSS实现鼠标悬停时启动图片轮播，要求图片切换时没有任何过渡效果。我尝试使用steps()函数（根据MDN说明它应该能实现这种帧动画效果），但切换时还是会出现过渡。

当前代码 #

CSS #

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: Arial, sans-serif;
}

body {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#image-slideshow {
  width: 300px;
  height: 200px;
  border: 3px solid black;
  border-radius: 5px;
  background: url("https://cdn.britannica.com/74/182174-050-6755AB49/balloon-sky.jpg") top/cover no-repeat;;
}

#image-slideshow:hover {
  animation: 5s steps(2) infinite slideshow;
}

@keyframes slideshow {
  33% {
    background: url("https://caloxinc.com/wp-content/uploads/2022/12/blog-blimp-helium-flying.jpg") top/cover no-repeat;
  }

  66% {
background: url("https://img.canarymedia.com/content/uploads/ZeroAvia-19-seat-prototype.jpg?auto=compress%2Cformat&crop=focalpoint&fit=crop&fp-x=0.5&fp-y=0.5&h=501&q=80&w=864&s=f1906dc9c8bd745878b612dfce20ad5c") top/cover no-repeat;
  }
}

HTML #

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <h1>Slideshow on hover</h1>
    <div id="image-slideshow"></div>
  </body>
</html>

我查过多个类似问题，但大多依赖JavaScript实现，而我不能使用JS，这些方案帮不上忙。若此问题被判定为重复，绝非因为我未做调研。

解决方法：使用雪碧图配合background-position动画 #

直接切换background-image属性无法通过steps()实现无过渡切换，因为浏览器会默认尝试过渡背景的变化，而且这种方式还可能导致图片加载延迟。正确的做法是把所有轮播图片合并成一张雪碧图，然后通过动画改变background-position来切换显示区域，配合steps()就能实现瞬间切换的效果。

修改后的代码 #

竖版雪碧图（三张300x200图片合并为300x600）

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: Arial, sans-serif;
}

body {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#image-slideshow {
  width: 300px;
  height: 200px;
  border: 3px solid black;
  border-radius: 5px;
  /* 使用雪碧图，初始显示顶部第一张图 */
  background: url("你的雪碧图URL") top/cover no-repeat;
  /* 强制禁止背景过渡 */
  transition: none;
}

#image-slideshow:hover {
  /* steps(2)对应3张图的2次切换 */
  animation: 5s steps(2) infinite slideshow;
}

@keyframes slideshow {
  100% {
    /* 背景位置移到底部，显示最后一张图 */
    background-position: bottom;
  }
}

如果是横向雪碧图（三张300x200图片合并为900x200），只需修改动画部分：

@keyframes slideshow {
  100% {
    background-position: right;
  }
}

原方法失效的原因 #

1. 浏览器对background-image的属性变化默认会触发过渡效果，steps()只能控制动画进度的分段，无法阻止这种默认过渡。
2. 切换background-image可能导致图片重新加载（缓存未命中时），出现加载延迟，破坏轮播体验。

额外优化：预加载雪碧图 #

避免 hover 时雪碧图加载延迟，可以用隐藏元素提前加载：

body::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  background: url("你的雪碧图URL");
}

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