用@keyframes+animation实现无缝横向滚动需复制文本内容、设translateX(-50%)、禁用缩放并预加载字体，避免视觉跳变与卡顿。
用 @keyframes + animation 做基础横向滚动
核心是让文字容器在固定宽度内向左位移，位移距离等于自身宽度，再回到起点形成循环。关键不是“滚动”本身，而是让动画结束时视觉无跳变。
常见写法：
@keyframes scroll-left {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
.scrolling-text {
white-space: nowrap;
animation: scroll-left 20s linear infinite;
}
注意：translateX(100%) 是从右边界开始（文字完全在视口右侧），translateX(-100%) 是移到左边界外（文字完全在左侧外），这样整段文字能完整划过一次。时间值 20s 需按内容长度和容器宽度手动调——太短会快得看不清，太长则停顿感明显。
实现真正无缝：必须复制内容并衔接
上面的动画在循环时会出现 0% → 100% 的瞬间重置，人眼能察觉“闪回”。要无缝，就得让两段相同文字首尾相接，在动画过程中始终有一段完整内容填满可视区。
立即学习“前端免费学习笔记（深入）”；
- HTML 中把文字写两遍：
<div class="scrolling-text">Hello World Hello World</div> - 容器设
overflow: hidden，只显示中间一段宽度 - 动画终点设为
translateX(-50%)，而非-100%，因为内容已双倍长度 - 确保两段文字之间无空格或换行符，否则会多出间隙
否则即使动画时间拉长，也会在循环点露出空白或重叠。
scroll-behavior: smooth 对这个场景完全无效
这是常被混淆的点：scroll-behavior 只控制 scrollTo() 或锚点跳转的滚动行为，和 CSS 动画无关。横向滚动文字是靠 transform 位移实现的，不是真实 DOM 滚动，所以加了也没用。
如果你发现文字滚动卡顿，问题通常在：
- 没启用硬件加速：给元素加
transform: translateZ(0)或will-change: transform - 文字内容过多导致重排：避免在动画中动态修改
innerHTML - 使用了
position: relative+left替代transform：这会触发重排，性能差且不平滑
移动端适配要注意 white-space 和缩放
iOS Safari 对 white-space: nowrap 在缩放后有时失效，文字可能折行破坏滚动效果。稳妥做法是：
- 显式设置
font-size为固定值（如16px），避免用户缩放干扰布局 - 用
viewportmeta 禁用缩放：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> - 测试真机，模拟器里
transform动画可能比实际设备更顺滑，容易掩盖性能问题
最麻烦的是字体加载时机——如果用自定义字体，动画开始时若字体未就绪，文字宽度突变会导致位移错乱。要么预加载字体，要么等 document.fonts.ready 后再启自动画。
