必须用双份内容+精确位移对齐才能实现真正无缝滚动，单组translatex(-100%)因浏览器渲染机制必然闪动；需white-space:nowrap、display:block消除inline间隙，加will-change:transform启用硬件加速，并避免safari兼容性问题。
单组内容用 translateX(-100%) 做无限滚动，一定会在 Safari 和部分安卓 WebView 里闪一下——这不是你 CSS 写错了，是浏览器渲染机制决定的。真正能稳住不跳帧的，只有双份内容 + 精确位移对齐这一条路。
为什么必须放两组相同内容？
动画终点和起点视觉上要“接得上”，但浏览器不会自动把最后一段文字/图片的末尾和第一段开头对齐。它只按你写的数值走：0% 是 translateX(0)，100% 是 translateX(-100%)，中间没逻辑、没判断、不理解“首尾相连”是什么意思。
放两组内容（比如原内容 3 行，DOM 里实际是 6 行），让动画走到 50% 时，第二组刚好顶到视口左边缘；走到 100% 时，第一组完全退出，第二组也刚好走完——此时视觉上就是“无缝衔接”。这本质是用物理长度覆盖时间断点。
- DOM 结构必须是连续的两份，不能靠 JS 动态插入或伪元素模拟
- 两组总宽度 ≥ 容器宽度 × 2，否则位移过程中会提前露底
- 别用
visibility: hidden或opacity: 0隐藏其中一组——它们仍占布局空间，但可能被动画忽略
位移值怎么写才不偏移？
translateX(-100%) 看似简洁，但它依赖子元素自身宽度撑开。如果内容是纯文字且父容器设了 width: 100%，那这个 100% 就是容器宽，不是文字真实宽度，结果就是位移量错配。
更可靠的做法是让子元素自己“报宽度”：
- 用
display: inline-block或white-space: nowrap防止换行打断连续性 - 给子容器加
width: max-content（配合flex更稳） - 动画终点写成
translateX(calc(-1 * 100%))，这里的100%才真指子元素自身宽 - 绝对不要写
translateX(-100vw)或translateX(-100px)——前者随视口变，后者响应式下直接失效
为什么 Safari 一动就卡顿或闪动？
Safari 对 transform + animation 的复合渲染有已知缺陷，尤其当元素带 text-shadow、filter 或字体平滑开启时，图层容易撕裂。
- 必须加
will-change: transform或transform: translateZ(0)强制硬件加速 - 确保子元素不继承
text-shadow或filter，这些会破坏图层合并 - Safari 下禁用
-webkit-font-smoothing: antialiased，改用subpixel-antialiased - 避免用复杂
cubic-bezier()曲线，比如cubic-bezier(.17,.67,.83,.67)，Safari 解析慢、掉帧明显
hover 暂停后恢复为什么抽搐？
纯 CSS 的 :hover { animation-play-state: paused } 在恢复时，是从暂停帧继续跑，而不是从“重置位置”开始。比如停在 67.3%，继续后动画会从那里起步，导致位移错位、第二组没对齐。
- 不推荐纯 CSS 暂停，尤其对体验敏感的场景
- JS 监听
mouseenter/mouseleave，用getComputedStyle(el).transform记录当前位移，暂停时清除动画，恢复时重设transform并重启动画 - 如果坚持用 CSS，至少加
animation-fill-mode: forwards，并确保@keyframes里 0% 和 100% 的位移值严格对称 - iOS 15.4 之前版本有
animation-play-statebug，需补-webkit-animation-play-state
最易被忽略的一点：所有 inline 元素（比如 <img>、<span></span>）之间的 HTML 换行或空格，都会转成约 4px 间隙，导致容器实际宽度比计算值大。这个误差在动画位移中会被放大，最终表现为“差一点就对不上”。所以 white-space: nowrap 和 display: block（或 vertical-align: top）必须同时存在，缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
