当 css 无限动画用于多图轮播时，若关键帧比例未随幻灯片数量动态调整，会导致循环错位——首轮正常显示全部幻灯片，后续仅重复显示后半段。根本原因是动画总时长与单张停留时间、关键帧百分比三者未协同校准。
当 css 无限动画用于多图轮播时，若关键帧比例未随幻灯片数量动态调整，会导致循环错位——首轮正常显示全部幻灯片，后续仅重复显示后半段。根本原因是动画总时长与单张停留时间、关键帧百分比三者未协同校准。
实现稳定、无缝的 CSS 无限轮播，核心在于保持动画周期（animation-duration）、单张可见时长与关键帧时间点三者严格数学对齐。原代码中保留了 3 张幻灯片的设计逻辑（@keyframes 基于 33.33% 分段），却扩展为 5 张，且未同步更新动画总时长和关键帧比例，导致浏览器在循环重放时因时间偏移而“跳过”前两张幻灯片。
✅ 正确配置逻辑（以 5 张幻灯片为例）
- 单张停留时间：设为 4 秒（视觉舒适区）
-
动画总时长：
5 × 4s = 20s（必须严格匹配幻灯片总数 × 单张时长） -
关键帧节奏（按 20s 总周期计算）：
-
0%→4%（0–0.8s）：淡入（20% × 0.2 = 4%，即 0.8s） -
4%→20%（0.8–4s）：完全可见（持续 3.2s，占总时长 16%） -
20%→24%（4–4.8s）：淡出（再用 0.8s） -
24%→100%（4.8–20s）：保持透明，等待下一张触发
-
对应 @keyframes 应写为：
@keyframes autoplay {
0% { opacity: 0; }
4% { opacity: 1; } /* 淡入结束 */
20% { opacity: 1; } /* 淡出开始 */
24% { opacity: 0; } /* 淡出结束 */
100% { opacity: 0; }
}
同时，animation 属性需统一设为 20s autoplay infinite linear，各子项通过 animation-delay 错开起始时间（0s, 4s, 8s, 12s, 16s），确保每 4 秒精准触发一张。
⚠️ 关键注意事项
-
禁止混用不同总时长：若将
animation-duration误设为 12s 或 24s，即使delay正确，关键帧百分比仍会错位，引发循环漂移； -
:nth-child(n)必须从 1 开始连续编号：缺失或跳号会导致某张幻灯片无动画延迟，破坏节奏； -
opacity: 0初始状态 +position: absolute是前提：否则幻灯片会堆叠干扰或初始可见； -
推荐使用
linear而非ease：避免因缓动函数导致实际可见时长不均。
✅ 最终可运行代码（精简优化版）
<div id="slides"> <div>@@##@@<p>Beautiful</p> </div> <div>@@##@@<p>Amazing</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a> <p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> </div> <div>@@##@@<p>Incredible</p> </div> <div>@@##@@<p>Wonderful</p> </div> <div>@@##@@<p>Sweet</p> </div> </div>
#slides {
max-width: 700px;
position: relative;
width: 100%;
}
#slides > * {
animation: 20s autoplay infinite linear;
left: 0;
opacity: 0;
position: absolute;
top: 0;
}
@keyframes autoplay {
0%, 24%, 100% { opacity: 0; }
4%, 20% { opacity: 1; }
}
#slides > *:nth-child(1) { animation-delay: 0s; }
#slides > *:nth-child(2) { animation-delay: 4s; }
#slides > *:nth-child(3) { animation-delay: 8s; }
#slides > *:nth-child(4) { animation-delay: 12s; }
#slides > *:nth-child(5) { animation-delay: 16s; }
#slides p {
background: #ff0000;
color: #fff;
font-size: 1.5rem;
margin: 0;
position: absolute;
bottom: 0; right: 0; top: 0;
text-align: center;
transform: scale(-1);
writing-mode: vertical-rl;
}
? 延伸建议：如需支持响应式或动态增删幻灯片，推荐改用 JavaScript 控制
animation-play-state或 CSS 自定义属性（--slide-count）配合calc()计算关键帧，但纯 CSS 方案务必坚守「总数 × 单显时长 = 总周期」这一黄金法则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
