纯CSS轮播必须用@keyframes+opacity+绝对定位，因transition仅响应属性变化而无法自动驱动时间轴；需用animation-delay错开每张图动画时机，并设overflow:hidden、transform:translateZ(0)等保障同步与性能。
纯 CSS 能实现淡入淡出轮播，但必须用 @keyframes + opacity + 绝对定位，不能只靠 transition 自动切换；否则图片会堆叠错位、动画不同步或首帧闪一下。
为什么 transition 单独用不了轮播？
transition 只响应属性变化（比如 JS 改 opacity），它本身不驱动时间轴。轮播需要“自动按顺序切换”，这得靠 @keyframes 定义一整段循环动画，并配合 animation-delay 错开每张图的激活时机。
- 只写
transition: opacity 0.6s，没 JS 触发就永远不动 - 若用
:hover或:checked驱动，属于手动切换，不是自动轮播 - 所有图片必须
position: absolute叠在同一位置，否则 opacity=0 的图仍占文档流空间
如何用 @keyframes 控制三张图淡入淡出？
以 3 张图、每张显示 3 秒、总周期 9 秒为例，关键帧要预留“交叉溶解”区间（避免全黑间隙）：
@keyframes fade {
0%, 33.33% { opacity: 1; }
36.33%, 100% { opacity: 0; }
}
- 第一张：
animation: fade 9s infinite 0s - 第二张：
animation: fade 9s infinite 3s - 第三张：
animation: fade 9s infinite 6s - 每张图的
33.33% → 36.33%是重叠过渡区，视觉上更顺滑
容易被忽略的兼容性与性能细节
Safari 和旧版 Chrome 对 opacity 动画渲染不稳定，尤其在低端 iOS 设备上容易卡顿或闪白。
立即学习“前端免费学习笔记（深入）”；
- 加
will-change: opacity到轮播项上，但切完立刻移除（用 JS 或伪类控制），否则内存泄漏 - 更稳妥的做法是加
transform: translateZ(0)强制 GPU 加速，注意别和已有transform冲突 - 容器必须设
overflow: hidden，否则动画过程中可能看到图边缘溢出 - 如果图片是
<img alt="怎样使用纯CSS实现图片轮播图的淡入淡出切换？" >标签，记得加width: 100%; height: 100%; object-fit: cover，避免拉伸变形
真正难的不是写出动画，而是让 3 张图在任意设备上都严格同步、不闪、不跳——这要求每张图的 animation-delay 必须精确到小数点后两位，且总周期不能被浏览器四舍五入截断。
