可行，需用@keyframes+animation+绝对定位；因transition在多图叠层中会导致占位错乱、闪屏或不触发，而@keyframes可精确控制时序与层级。
纯 CSS 实现多图交替淡入淡出，可行，但必须用 @keyframes + animation + 绝对定位，不能只靠 transition；否则会出现占位错乱、闪屏或动画不触发。
为什么 transition: opacity 单独用在轮播上大概率失效
常见错误是给每张图加 transition: opacity 0.5s，再用 JS 切 class 控制显隐——这在多图叠层场景下会出问题：
- 没设
position: absolute：图片仍在文档流中，opacity 变为 0 后仍占位，新图无法覆盖显示 - 用
display: none配合 opacity：display: none让元素脱离渲染树，transition直接被忽略 - JS 同步改多个元素 opacity：浏览器可能批量重绘，导致过渡未开始就切到下一张
- 没配
visibility: hidden：opacity 为 0 的图仍可聚焦、响应点击，造成交互干扰
正确写法：用 @keyframes 定义统一淡入淡出周期
核心是让所有图共享同一套动画时序，靠 animation-delay 错开起始时间。以 3 张图为例，总周期 9 秒，每张显示 3 秒：
@keyframes fade {
0%, 33.33% { opacity: 1; }
36.33%, 100% { opacity: 0; }
}
.slide-1 { animation: fade 9s infinite 0s; }
.slide-2 { animation: fade 9s infinite 3s; }
.slide-3 { animation: fade 9s infinite 6s; }
注意几个关键点：
- 关键帧区间要留出“安全间隙”（比如 33.33% → 36.33%），避免两张图同时 opacity=1 导致叠加变亮
- 不要用
from/to写单帧动画，多图轮播必须用百分比控制精确区间 - 所有
.slide-*必须有position: absolute; top: 0; left: 0;，父容器设position: relative - 动画结束帧不保留（
animation-fill-mode默认为none），所以无需手动清理状态
移动端 Safari 卡顿或闪一下？加硬件加速但别滥用
iOS Safari 对 opacity 动画的合成优化较弱，尤其在低配设备或配合 fixed 定位时：
- 加
will-change: opacity仅对轮播容器设，别全图都加，否则内存开销大 - 更稳妥的是
transform: translateZ(0)，但若图本身已有 transform（如缩放），得合并写：transform: translateZ(0) scale(1) - 避免在
input:focus或页面滚动中触发该动画，Safari 会强制降帧保输入体验 - 如果用了
will-change，记得在动画停用后用 JS 清除：el.style.willChange = 'auto'
预加载和 DOM 结构容易被忽略
动画再顺，图没加载完也会白屏或跳变：
- 所有轮播图必须在 HTML 中一次性写出，不能懒加载——CSS 动画不监听
load事件 - 推荐用
<img>标签而非background-image，前者可监听onload，后者无法可靠判断是否就绪 - 若必须用背景图，得用双容器预加载：第一层显示当前图，第二层提前设置好下一张
background-image并 opacity=0，等动画触发时再淡入 - 无障碍考虑：加
aria-live="polite"和role="group"，但纯 CSS 轮播无法自动播报切换，需 JS 补充
真正麻烦的不是写动画，而是确保所有图尺寸一致、加载完成、层级不冲突、移动端不掉帧——这些细节一漏，淡入淡出就变成闪退或卡死。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
