animation + transform 是唯一靠谱方案，因 transform 仅触发合成层更新且 GPU 加速，而 margin-left 或 left 会强制重排导致卡顿；需用双 track 结构、linear 无限动画及精确位移匹配实现无缝滚动。
为什么 animation + transform 是唯一靠谱方案
用 margin-left 或 left 驱动滚动会强制触发重排（reflow），浏览器必须重新计算布局，卡顿几乎不可避免；而 transform: translateX() 仅影响合成层，GPU 加速下帧率稳定。CSS 动画本身不阻塞主线程，但前提是动画属性可被硬件加速——只有 transform 和 opacity 满足这点。
常见错误是写成：@keyframes scroll { from { margin-left: 0; } to { margin-left: -100px; } }，这直接掉进重排陷阱。
如何构造真正无缝的滚动结构
单容器位移永远无法“无缝”：滚动到末尾时位置突变，人眼可察觉跳变。必须用双份内容拼接，靠位移差制造视觉连续性。
- HTML 中准备两份完全相同的子元素序列，例如两个并列的
<div class="marquee-track"> - 父容器设
overflow: hidden，宽度为单个 track 的 100% - 动画让两个 track 同步向左平移，当第一个 track 完全移出视口时，第二个刚好补满——此时重置第一个到右侧，视觉上无断点
- 关键：动画时长必须与总位移严格匹配，例如 track 宽度为 600px，动画从
translateX(0)到translateX(-600px)，时长设为10s，则速度恒定
@keyframes 里不能写百分比位移？错，但必须配 infinite linear
很多人试过用 0% { transform: translateX(0); } 100% { transform: translateX(-600px); }，却在循环时看到停顿——问题出在默认的 easing。贝塞尔缓动会让首尾速度不一致，造成“撞墙感”。
立即学习“前端免费学习笔记（深入）”；
正确写法必须带 linear：
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-600px); }
}
.marquee-track {
animation: marquee 10s linear infinite;
}
注意：-600px 必须等于单个 track 的实际宽度（含间隙），用 getBoundingClientRect().width 实测比硬编码更可靠。
响应式下宽度变化导致动画撕裂怎么办
窗口缩放时，track 宽度变了，但 CSS 动画里的像素值没变，位移量错配，出现卡顿或露白。纯 CSS 无法监听 resize 并重设动画参数，所以得交还给 JS 控制关键变量：
- 用
@property声明自定义动画变量（仅 Chrome/Edge 105+ 支持）：@property --marquee-offset { syntax: '<length>'; inherits: false; initial-value: 0px; } - 动画改用该变量：
transform: translateX(var(--marquee-offset)); - JS 监听
resize，动态设置element.style.setProperty('--marquee-offset', '-'+trackWidth+'px') - 兼容旧浏览器？放弃 CSS 动画，改用
requestAnimationFrame手动更新transform，精度更高且可控
最易被忽略的是：动画重置时机。双 track 结构中，一个 track 移出后需立即重置其 transform 为 translateX(600px)（即移到右侧），这个操作若放在动画结束回调里，会有 16ms 左右延迟——必须在 animationiteration 事件中同步执行，否则必卡。
