CSS keyframes动画首轮循环卡顿，后续正常的修复方案

问题根源 #

1. 图片未预加载：首轮动画执行时，浏览器只有在关键帧触发时才开始下载对应背景图，等待图片加载完成的间隙就会出现卡顿；后续循环时图片已经在浏览器缓存中，所以运行流畅。
2. 额外问题：你原代码并没有实现真正的淡入切换效果——CSS的background-image属性不支持过渡/动画，当前效果只是图片的硬切换。

解决方案一：预加载所有图片 #

用一个隐藏容器提前加载所有动画用到的图片，让浏览器缓存这些资源，动画执行时直接读取缓存：

<div class="container"></div>
<!-- 预加载容器 -->
<div class="preload-images" style="display: none;">
  <img src="https://i.imgur.com/IzY1cRC.jpeg" alt="">
  <img src="https://i.imgur.com/Bq4PJjC.jpeg" alt="">
  <img src="https://i.imgur.com/43idGF1.jpg" alt="">
  <img src="https://i.imgur.com/OMa9YYH.jpg" alt="">
  <img src="https://i.imgur.com/CTLFd8t.jpg" alt="">
</div>

CSS部分可保留原动画代码，预加载后首轮不会卡顿，但依然是硬切换效果。

解决方案二：实现真正的淡入切换+解决卡顿 #

改用多层叠加元素，通过控制opacity实现淡入淡出，同时天然解决预加载问题（页面加载时所有背景图都会被加载）：

<div class="container">
  <div class="bg-layer" style="background-image: url('https://i.imgur.com/IzY1cRC.jpeg')"></div>
  <div class="bg-layer" style="background-image: url('https://i.imgur.com/Bq4PJjC.jpeg')"></div>
  <div class="bg-layer" style="background-image: url('https://i.imgur.com/43idGF1.jpg')"></div>
  <div class="bg-layer" style="background-image: url('https://i.imgur.com/OMa9YYH.jpg')"></div>
  <div class="bg-layer" style="background-image: url('https://i.imgur.com/CTLFd8t.jpg')"></div>
</div>

.container {
  height: 300px;
  width: 550px;
  position: relative;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  opacity: 0;
  animation: fade 25s infinite linear;
}

/* 给每个图层设置不同的动画延迟，实现依次淡入淡出 */
.bg-layer:nth-child(1) { opacity: 1; animation-delay: 0s; }
.bg-layer:nth-child(2) { animation-delay: 5s; }
.bg-layer:nth-child(3) { animation-delay: 10s; }
.bg-layer:nth-child(4) { animation-delay: 15s; }
.bg-layer:nth-child(5) { animation-delay: 20s; }

@keyframes fade {
  0%, 16% { opacity: 0; } /* 前16%时间隐藏 */
  20%, 96% { opacity: 1; } /* 中间保持显示 */
  100% { opacity: 0; } /* 最后隐藏，循环衔接 */
}

这个方案不仅解决了首轮卡顿问题，还真正实现了背景图的淡入淡出切换效果，动画过渡更自然。

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