本文详解如何修复 CSS @keyframes 无限轮播中因关键帧比例与动画时长不匹配导致的幻灯片跳帧、循环错位问题，重点解决“首轮正常、后续仅显示后几帧”的典型故障。
本文详解如何修复 css `@keyframes` 无限轮播中因关键帧比例与动画时长不匹配导致的幻灯片跳帧、循环错位问题，重点解决“首轮正常、后续仅显示后几帧”的典型故障。
在使用纯 CSS 实现无限幻灯片轮播（如 W3C Slideset6 示例）时，一个常见却隐蔽的问题是：当幻灯片数量变化后，若未同步调整动画总时长与关键帧百分比，会导致循环逻辑断裂。你遇到的现象——第一轮完整显示 1→2→3→4→5，之后却永远从第 3 张开始循环（3→4→5→3→…），根本原因在于：原 keyframes 基于 3 张幻灯片设计（每张占 ~33.33%），而你扩展为 5 张，却仍沿用 12s 总时长和旧关键帧分布，造成动画时间轴错位与 animation-delay 失效。
✅ 正确解法：时长与关键帧必须协同缩放
假设每张幻灯片需停留约 4 秒（视觉上稳定可见），则 5 张幻灯片的完整周期应为：
总动画时长 = 单张停留时间 × 幻灯片数量 = 4s × 5 = 20s
同时，@keyframes 中的关键帧百分比必须按 20% 区间重新划分，确保每张幻灯片在各自 animation-delay 触发后，拥有独立、无重叠的「淡入→保持→淡出」窗口：
@keyframes autoplay {
0% { opacity: 0; } /* 起始隐藏 */
4% { opacity: 1; } /* 快速淡入（≈0.8s）*/
20% { opacity: 1; } /* 完整显示（持续至本段结束）*/
24% { opacity: 0; } /* 开始淡出（≈0.8s）*/
100% { opacity: 0; } /* 归零，为下一轮准备 */
}
? 关键逻辑：
20%对应 20s 动画中的 4s（即第 1 张的显示区间），24%是其淡出起点。后续每张幻灯片通过animation-delay错开 4s，自然落入各自对应的 20% 时间槽内。
? 完整修复后的 CSS（含注释）
#slides {
max-width: 700px;
position: relative;
width: 100%;
}
#slides > * {
animation: 20s autoplay infinite linear; /* ✅ 总时长更新为 20s */
left: 0;
opacity: 0;
position: absolute;
top: 0;
}
@keyframes autoplay {
0% { opacity: 0; }
4% { opacity: 1; } /* 淡入起始点（占总时长 4% → 0.8s）*/
20% { opacity: 1; } /* 显示终点（占总时长 20% → 4s）*/
24% { opacity: 0; } /* 淡出起始点（占总时长 24% → 4.8s）*/
100%{ opacity: 0; }
}
/* ✅ delay 严格按 4s 递增，与 20s 总时长对齐 */
#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; }
⚠ 注意事项与最佳实践
-
避免硬编码百分比：若未来增减幻灯片，需同步更新
animation时长、@keyframes百分比及所有animation-delay值。建议用 CSS 自定义属性（如--slide-count: 5; --duration: 20s;）配合calc()提升可维护性。 -
淡入/淡出时长可调：当前
4%→20%→24%分配了约 0.8s 淡入+0.8s 淡出。如需更柔和效果，可改为2%→22%→26%（延长过渡），但需确保22%−2% = 20%仍对应 4s 显示期。 -
性能提示：
opacity动画性能良好，但若叠加transform或filter，建议添加will-change: opacity提前优化渲染层。 -
无障碍补充：纯 CSS 轮播缺乏用户控制（暂停/跳转）。生产环境应添加 JS 控制按钮，并设置
prefers-reduced-motion媒体查询降级。
遵循此方案，幻灯片将严格按 1→2→3→4→5→1→… 无限循环，彻底解决“卡在中间帧”的故障。核心原则始终如一：动画总时长、单帧占比、延迟偏移三者必须数学自洽。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
