用position: absolute做跑马灯易卡顿跳帧，根本原因是单组元素位移后重置left值会破坏动画时间连续性；可靠解法是双份内容并行滚动，通过负延迟错开时机实现视觉无缝循环。
为什么用 position: absolute 做跑马灯反而容易卡顿或跳帧
直接套用 @keyframes + left 位移 + absolute 定位，常出现首尾衔接不严、动画突然回跳、或在 Safari 上掉帧。根本原因是：单组元素位移结束后必须重置 left 值，而 CSS 动画无法原子性地“无缝切换到初始状态”，浏览器会把重置视为一次突变，破坏时间连续性。
真正可靠的解法是双份内容并行滚动——一份走完时，另一份刚好到达可视区起点，视觉上无断点。
- 必须用两组完全相同的子元素（比如两个
.marquee__track），而非一个元素反复 reset - 两组的
animation-duration必须一致，且第二组的animation-delay设为负的半周期（例如总时长 20s，则设delay: -10s） - 容器需设
overflow: hidden，且高度/宽度严格匹配单个子项，否则留白或裁切异常 - 避免用
transform: translateX()替代left—— 虽然性能更好，但 Safari 对transform动画的负延迟支持不稳定，仍建议用left
如何写可复用的 CSS 动画轨道类名
不要给每个跑马灯单独写 keyframes，而是抽象出通用轨道规则。核心是让动画从 0% 到 100% 完成「自身宽度」的左移，再靠双实例错开时机实现循环感。
@keyframes marquee-loop {
0% { left: 100%; }
100% { left: -100%; }
}
这个写法比 left: 0 → left: -100% 更安全：它确保元素从右侧完全入场，再完全移出左侧，不依赖父容器宽度计算误差。
立即学习“前端免费学习笔记（深入）”；
- 动画时长由业务决定（如
animation-duration: 30s），但必须和animation-delay配合使用 - 两组轨道分别加类
.marquee__track--a和.marquee__track--b，后者加animation-delay: -15s - 若内容动态加载，务必等 DOM 渲染完成后再应用动画类，否则 Safari 可能跳过首帧
HTML 结构里哪些属性一错就断循环
结构看似简单，但三个地方写错会导致“明明写了双份，还是看到空白或闪跳”：
- 外层容器必须设
position: relative，否则absolute子项脱离文档流后高度塌陷，overflow: hidden失效 - 每个
.marquee__track必须设position: absolute; top: 0; white-space: nowrap;—— 缺white-space会让文本换行，破坏水平滚动预期 - 两组内容 HTML 必须完全相同（包括空格、换行符），DOM diff 工具可能忽略这点，但浏览器渲染引擎对像素级对齐敏感
示例结构：
<div class="marquee"> <div class="marquee__track marquee__track--a">文字内容 文字内容</div> <div class="marquee__track marquee__track--b">文字内容 文字内容</div> </div>
移动端 iOS 上 animation-delay 负值失效怎么办
Safari 15.4+ 修复了负 animation-delay 的兼容性，但旧版（尤其 iOS 14.x）仍会忽略负延迟，导致两组同时启动，画面重叠。
- 降级方案：不用
delay，改用 JS 在第二组元素上动态加 class，延迟setTimeout启动（仅 iOS 触发） - 更稳妥的是服务端 UA 检测，对旧 iOS 输出内联 style：
style="animation-delay: -15s"，绕过 CSSOM 解析缺陷 - 测试时务必真机连 Safari 开发者工具，模拟器不触发该 bug
真正难的不是写出能动的代码，而是让两组内容在任意屏幕宽度、任意字体缩放、任意加载时机下，像素级对齐不露破绽。这需要把「内容宽度」当作变量参与计算，而不是写死百分比。
