答案：因为文字轮播本质是按时间顺序控制显隐，opacity决定可见性，@keyframes定义透明度变化节奏，animation-delay错开各元素启动时机，三者组合即可实现无JS循环切换；所有文字需绝对定位叠放，且必须加animation-fill-mode: forwards防止闪退。
为什么只用 opacity + animation-delay 就能轮播文字
因为文字轮播本质不是“移动”，而是“按时间顺序控制显隐”。opacity决定是否可见，@keyframes定义变化节奏，animation-delay错开多个元素的启动时机——三者组合，不用 JS 也能形成循环切换效果。
关键不是让文字动起来，而是让它们在正确的时间点从透明变不透明、再变回透明。只要每段文字的动画周期一致、延迟值递增，视觉上就是自动轮播。
- 所有文字必须包裹在同一个容器内，且用
position: absolute叠在一起，否则会撑开布局、错位 -
animation-fill-mode: forwards必须写，否则动画结束瞬间opacity回退到 0，文字闪一下就没了 - 总动画时长（比如 8s）要拆解清楚：入场 1.5s + 停留 4s + 退场 1.5s + 空档 1s，否则衔接生硬
怎么写一个三行文字的淡入淡出轮播
假设你要轮播三句话，每句显示 4 秒，淡入/淡出各 0.6 秒，中间无缝衔接：
@keyframes fadeLine {
0%, 10% { opacity: 0; }
15%, 85% { opacity: 1; }
90%, 100% { opacity: 0; }
}
.fade-line {
position: absolute;
top: 0;
left: 0;
opacity: 0;
animation: fadeLine 8s ease-in-out infinite;
}
.fade-line:nth-child(1) { animation-delay: 0s; }
.fade-line:nth-child(2) { animation-delay: 8s; }
.fade-line:nth-child(3) { animation-delay: 16s; }
注意：nth-child 的延迟值不是随意填的，必须等于单次动画时长 × 序号减一（如第 2 行是 8s × (2−1)）。如果加了停留时间，还要额外加上停留段长度，否则第二行会提前入场。
立即学习“前端免费学习笔记（深入）”；
- 不要给每个
.fade-line单独写一套@keyframes，复用同一套更易维护 - 避免用
visibility: hidden或display: none配合 opacity，前者不触发过渡，后者会破坏布局流 - 若文字内容长度差异大，建议统一设
line-height和min-height，防止轮播时容器跳动
animation-delay 和 transition 混用会出什么问题
直接混用基本不可行。transition 是响应式变化（比如 class 切换），animation-delay 是定时器式预设——两者触发机制完全不同，强行套一起容易导致状态错乱。
常见翻车现场：
- 用
transition: opacity 0.4s写在初始样式里，又同时加animation-delay，结果动画没开始，transition 已经把 opacity 拉到 1 了 - JS 控制 class 切换时，误以为
animation-delay能覆盖 transition，实际 transition 会抢在动画帧之前生效，造成“闪一下再动” - 想用
:hover触发轮播？不行。animation-delay不响应伪类，hover 只能触发 transition 类型动画
结论：轮播场景下，选 animation 就别碰 transition；需要交互响应（比如点击切换），就彻底换用 classList.toggle() + transition 方案。
移动端轮播文字要注意哪些兼容性细节
Android 4.x 和旧版 Safari（iOS 9 以前）对 @keyframes 支持不全，必须加 -webkit- 前缀；另外，部分低端安卓 WebView 会忽略 animation-fill-mode: forwards，导致文字播完立刻消失。
- 必须写双前缀：
@-webkit-keyframes和@keyframes，且内容完全一致 - 为防
forwards失效，可额外加一句opacity: 1在最终 class 里兜底（如.fade-line.active { opacity: 1; }） - 避免在动画中同时改
transform和opacity，某些 Android 4.4 WebView 会卡顿或跳帧 - 字体加载未完成时轮播已开始？加
font-display: optional或监听document.fonts.load后再启动画
最麻烦的不是写法，而是不同设备对“动画结束即刻应用 final state”这一行为的理解不一致——测试时务必真机跑一遍，不能只信模拟器。
