用两份相同文字并排+translateX(-50%)+linear+infinite实现无缝滚动动画，容器overflow:hidden、宽度固定，duration按像素/秒计算并响应式调整，注意字体加载与单位一致性。
直接用 @keyframes + animation 实现，但必须处理好首尾衔接，否则会卡顿或闪跳——这是 90% 的人失败的根源。
为什么纯 transform: translateX() 往返动画会闪跳
常见写法是让文字从右到左平移再瞬间跳回右侧，浏览器渲染时会产生视觉断层。本质是动画没有“无缝闭环”，from 和 to 的位移值不构成周期性连续映射。
解决思路：用两份完全相同的文字并排铺开，让它们同步左移，当第一份完全移出视口时，第二份刚好补满——这样永远有内容在显示区。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 容器设
overflow: hidden，宽度固定（如width: 100vw） - 内部包裹层宽度设为内容宽度的 200%，例如
width: 200% - 文字内容需复制一份：
<span>文案</span><span>文案</span> - 动画关键帧只控制
transform: translateX(-50%)，让整体左移半个自身宽度，自然循环
animation 参数怎么配才不卡、不加速
滚动速度要稳定，不能受内容长度或屏幕尺寸干扰。关键不是调 duration，而是让位移距离与时间比例匹配。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
linear动画函数，禁用ease类缓动（会导致变速感） -
duration值建议基于像素/秒计算：比如希望匀速 60px/s，内容总宽 1200px，则duration: 20s（1200 ÷ 60） - 务必加
infinite，且不要写forwards（会停在终点破坏循环） - 避免用
%单位做translateX动画起点/终点——不同宽度容器下百分比含义不同，改用px或保持相对单位一致
响应式下文字重叠或跑太快怎么办
用固定 px duration 在小屏上会显得飞快，大屏又太慢；用 % 又容易因字体缩放导致错位。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
ch或em定义容器宽度，让文字块宽度随字体变化自适应 - 动画
duration改用 CSS 自定义属性：--scroll-duration: 30s，配合 JS 按视口宽度动态更新（例如matchMedia监听max-width: 768px时设为45s） - 字体用
font-variant-numeric: tabular-nums防止数字宽度抖动影响对齐 - 若内容含图标或行内元素，统一设
vertical-align: bottom，避免基线错位撕裂
最易被忽略的是字体加载时机：如果用 Web Font，@font-face 加载完成前文字宽度突变，会导致动画突然跳帧。务必用 font-display: optional 或监听 document.fonts.load() 后再启用动画。
