如何阻止CSS关键帧百分比间的渐变？多图气球动画实现困惑

你之前的问题出在使用了linear作为动画时间函数，导致浏览器尝试在背景图之间做平滑过渡（视觉上会出现异常闪烁），而且你误解了steps()的用法——它完全支持多关键帧场景，只要正确设置步数即可。

修改后的CSS代码如下：

#balloon {
  /* 用steps(4)替代linear，将动画拆分为4个无过渡的步骤 */
  animation: balloon-float steps(4) 2s infinite;
  /* 务必设置与气球图片匹配的宽高 */
  width: 100px;
  height: 150px;
  background-size: cover;
}

@keyframes balloon-float {
  0% {
    background-image: url(../img/balloon-1.png);
  }
  25% {
    background-image: url(../img/balloon-2.png);
  }
  50% {
    background-image: url(../img/balloon-3.png);
  }
  75% {
    background-image: url(../img/balloon-4.png);
  }
  100% {
    background-image: url(../img/balloon-1.png);
  }
}

关键说明： #

• steps(4)：把2秒的动画时长平均分成4个步骤，每个步骤停留0.5秒，到达时间节点时直接切换到下一张背景图，完全没有过渡效果。
• 必须给#balloon设置与图片匹配的宽高，并添加background-size: cover（或contain），确保背景图正常显示。
• 若要避免循环末尾的闪烁，可以把关键帧的范围写得更精准，比如0% ~ 24.99%显示第一张图，25% ~ 49.99%显示第二张图，以此类推。

这个纯CSS方案完全满足需求，不需要引入JS或雪碧图，代码简洁适配小型模块场景。

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