必须用两组相同内容并排实现无缝滚动，因单组动画位移终点无法视觉对齐起点，会产生空白间隙；两组总宽需≥容器宽×2，配合inline-block、overflow:hidden及translateX(−100%)（指子元素自身宽）确保衔接无断点。
为什么用两组内容才能实现无缝滚动
单组文字滚动到末尾时会出现空白间隙，浏览器无法自动衔接首尾——因为 animation 本身不理解“文本流”的逻辑，只按设定的位移数值执行。用两组相同内容并排（content content），让第二组在第一组移出视口前刚好接上，视觉上就没了断点。
关键不是“复制”，而是让两组内容总宽度 ≥ 容器宽度 × 2，否则位移过程中会提前露底。
- 必须用
display: inline-block或white-space: nowrap防止换行打断连续性 - 父容器需设
overflow: hidden，否则滚动时会撑出横向滚动条 - 动画
duration要和位移距离匹配：位移越长，时间越长，否则速度失真
keyframes 里位移值怎么算才不跳帧
位移终点必须等于单组内容的完整宽度（不是容器宽），否则第二组进来的起始位置对不齐。常用做法是用 100% 表示“向左移动自身全部宽度”，但前提是内容能撑开、且父容器不截断。
更稳妥的是用 calc(-1 * var(--width)) 配合 CSS 自定义属性，或 JS 动态写入真实像素值。纯 CSS 方案中，推荐用 transform: translateX() 而非 left，避免触发重排。
- 起始：
transform: translateX(0) - 终点：
transform: translateX(calc(-1 * 100%))—— 这里100%指的是子元素自身宽度 - 不能写成
translateX(-100vw)，因为 vw 是视口宽，和文字实际宽无关
如何避免 Safari 下卡顿或闪动
Safari 对 transform + animation 的复合渲染有优化缺陷，尤其当文字含阴影、渐变或字体平滑开启时。最有效解法是强制启用硬件加速，并隔离动画层。
- 给滚动容器加
transform: translateZ(0)或will-change: transform - 确保子元素不继承
text-shadow或filter，这些会破坏图层合并 - 禁用
-webkit-font-smoothing: antialiased（仅 Safari），改用subpixel-antialiased - 动画
timing-function避免用cubic-bezier(.17,.67,.83,.67)等复杂曲线，Safari 解析慢
响应式下文字缩放导致位移错位怎么办
媒体查询改变 font-size 后，文字宽度变了，但 keyframes 里的 100% 仍按旧尺寸计算，结果就是第二组进来的时机偏移，出现卡顿或重叠。
根本解法是把位移逻辑交给 JS 控制宽度，CSS 只负责动画声明；或者用 CSS @container（需现代浏览器支持）配合 container-type: inline-size 动态响应。
- 简单 fallback：用
clamp()锁定字号范围，减少突变 - 关键帧改用
from/to替代百分比，配合 JS 注入实时宽度 - 移动端慎用
vh/vw单位做位移基准，iOS Safari 中它们在横竖屏切换时会延迟更新
实际滚动效果是否“无缝”，最终取决于内容宽度测量精度和浏览器对 transform 帧率的调度能力——这两点在低端 Android 设备上最容易暴露问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
