为何CSS动画中首张图片仅短暂显示，后两张显示时长更长？

问题原因 #

你的动画出现首张图短暂显示、后续图片时长过长的核心问题是**@keyframes关键帧的百分比分配严重失衡**，导致各阶段时间占比差距极大：

• 0%到25%的区间仅占总时长的25%（对应7s中的1.75s），这段是第一张图向第二张图过渡的阶段
• 25%到100%的区间占了总时长的75%（对应7s中的5.25s），这段是第二张图向第三张图过渡的阶段
• 因为动画设置为无限循环，100%结束后会瞬间跳回0%，第三张图立刻切换回第一张，紧接着进入下一轮过渡，所以第一张图几乎没有稳定显示的时间，只会在循环开头短暂出现，而第二、三张图的显示时长被大幅拉长。

解决方案 #

要实现三张图均匀切换，需要将总时长平均分配给每张图。以下是调整后的代码，确保每张图显示时长一致：

div {
  width: 200px;
  height: 200px;
  /* 初始背景与动画第一帧保持一致，避免动画启动时的闪烁 */
  background: url("https://images.pexels.com/photos/1002722/pexels-photo-1002722.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=400&h=250&fit=crop&crop=focalpoint");
  animation-name: example;
  animation-duration: 6s; /* 设置为3的倍数，方便均分时长 */
  animation-iteration-count: infinite;
  /* 若需要无过渡的硬切换，取消下面注释 */
  /* animation-timing-function: steps(1, end); */
}

@keyframes example {
  /* 第一张图占据0% - 33.33%的时间段 */
  0%, 33.33% {
    background: url("https://images.pexels.com/photos/1002722/pexels-photo-1002722.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=400&h=250&fit=crop&crop=focalpoint");
  }
  /* 第二张图占据33.34% - 66.66%的时间段 */
  33.34%, 66.66% {
    background: url("https://images.pexels.com/photos/6087668/pexels-photo-6087668.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=400&h=250&fit=crop&crop=focalpoint");
  }
  /* 第三张图占据66.67% - 100%的时间段 */
  66.67%, 100% {
    background: url("https://images.pexels.com/photos/10443212/pexels-photo-10443212.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=400&h=250&fit=crop&crop=focalpoint");
  }
}

关键调整说明 #

• 将动画总时长设置为3的倍数（如6s），每张图稳定显示2s，分配逻辑更清晰
• 每个图片对应的关键帧使用两个百分比值，确保图片在对应时间段内保持静态，不会持续过渡
• 若不需要渐变过渡效果，添加animation-timing-function: steps(1, end);即可实现硬切换

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