HTML5如何设置横向滚动文字_用CSS动画实现无缝滚动【方法】

用@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 中把文字写两遍：
  Hello World Hello World

• 容器设 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），避免用户缩放干扰布局
• 用 viewport meta 禁用缩放：
• 测试真机，模拟器里 transform 动画可能比实际设备更顺滑，容易掩盖性能问题

最麻烦的是字体加载时机——如果用自定义字体，动画开始时若字体未就绪，文字宽度突变会导致位移错乱。要么预加载字体，要么等 document.fonts.ready 后再启自动画。