跑马灯不能只用animation往返移动，因折返点会产生停顿；需用两个并排元素单向位移+重置实现无缝循环，配合absolute定位、transform位移、linear时序及will-change优化性能。
跑马灯为什么不能只用 animation 往复移动？
因为纯 @keyframes 往返（0% → 100% → 0%）会在折返点产生明显停顿或跳变，破坏“无限滚动”的视觉连贯性。真正可用的方案是：用两个完全相同的元素并排，各自做单向位移，当第一个移出视口时，第二个刚好补上，再通过重置位置实现无缝循环。
position: absolute 在跑马灯里的实际作用
它让文字块脱离文档流，避免影响布局；更重要的是，配合 left 或 transform: translateX() 控制位移时，能精准控制起点和终点，且不触发重排（尤其是用 transform 时）。注意：父容器必须设 position: relative，否则 absolute 子元素会相对于 viewport 定位，容易跑偏。
- 父容器需加
overflow: hidden，否则滚动内容会溢出 - 子元素宽度建议显式设置（如
width: max-content或预估值），避免因换行导致高度突变 - 若内容含图片或字体加载延迟，首次动画可能错位——可加
visibility: hidden初始态，等 DOM 尺寸稳定后再visibility: visible
关键帧动画怎么写才不卡顿、不闪跳？
核心是两段动画同步推进，且位移总距离等于一个完整内容块宽度。推荐用 transform: translateX() 而非 left，前者走合成层，性能更好。
@keyframes scroll-left {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
上面这段本身不足够——它只驱动一个元素。你需要两个 <div> 并列，都应用该动画，但第二个加 animation-delay: -2s（假设动画时长为 2s），让它们相位差半个周期，视觉上就变成连续流动。
立即学习“前端免费学习笔记（深入）”；
- 动画时长（
animation-duration）要根据内容长度和期望速度反推，太短易眼花，太长显呆滞 - 必须用
animation-timing-function: linear，任何缓动都会破坏匀速感 - 不要用
infinite单独控制循环，而应确保位移起止点严格对应（如100% → -100%），否则末尾重置会有微小间隙
移动端 Safari 上动画突然卡住或跳回起点？
这是 Safari 对 transform + absolute 元素的渲染优化 Bug，尤其在页面滚动或键盘弹出后。临时解法是在动画元素上加 will-change: transform，强制开启硬件加速；更稳妥的是加一层空的 backface-visibility: hidden，能绕过部分 WebKit 渲染路径异常。
- 别对整个跑马灯容器设
will-change，只加在动画子元素上 - 如果内容动态更新（比如轮播文案变化），记得手动重置
animation：先animation: none触发重绘，再恢复原animation值 - iOS 15+ 中，若父容器有
contain: layout paint，可能截断绝对定位子元素——删掉这个属性
transform 终点虽准，但破坏了纯 CSS 方案的简洁性；用固定百分比又容易在不同设备上露白边。多数情况下，宁可多留 10% 冗余位移，也别追求像素级严丝合缝。 
