纯CSS3实现无缝文字滚动需采用双份内容拼接+translateX(-50%)位移，配合flex与max-content自动计算宽度；竖向滚动须手动测高并设精确高度；动态内容需JS辅助更新DOM与动画时长。
纯 CSS3 实现无限循环文字滚动，关键不在于“能不能动”，而在于“动得是否真正无缝”——绝大多数人卡在视觉跳变、首尾衔接不自然、动态内容适配失败这三点上。直接用 @keyframes + translateX 写死位移，90% 的情况会露馅。
为什么 translateX(-100%) 会跳帧
常见错误是这样写动画：
@keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}问题在于：当动画结束，元素回到 0% 瞬间，浏览器会把内容从末尾“硬切”回开头，只要两段内容视觉不一致（比如字数不同、行高微差、字体渲染偏移），就会出现明显闪跳。这不是性能问题，是逻辑缺陷。
- 必须用“双份内容首尾拼接”结构，让第二份内容天然承接第一份的退出位置
-
translateX(-50%)是安全阈值：动画只走一半总宽度，靠复制内容撑满剩余空间 - 容器
width: 100%、内部列表display: flex; width: max-content;才能真实反映内容总长
横向滚动：用 flex + max-content + -50% 位移
这是目前最稳定、无需 JS、兼容性好（Chrome 43+/Firefox 16+/Safari 9+）的方案，适合公告栏、新闻跑马灯等场景。
立即学习“前端免费学习笔记（深入）”；
- HTML 结构必须包含两套完全相同的内容：
<div class="scroll-list"> <div class="scroll-item">A</div> <div class="scroll-item">B</div> <div class="scroll-item">C</div> <!-- 复制开始 --><div class="scroll-item">A</div> <div class="scroll-item">B</div> <div class="scroll-item">C</div> <!-- 复制结束 --> </div> - CSS 中禁止设置固定宽高，用
width: max-content让 flex 容器自动伸展，否则位移计算失效 - 动画时长不能写死，应按内容总宽和期望速度反推：例如内容总宽 3000px，想保持 60px/s 的视觉流速，则动画时长 =
3000 / 60 = 50s，写成animation: scroll 50s linear infinite
竖向滚动：必须用 translateY + 高度精确控制
竖向滚动对高度敏感，max-content 在垂直方向不可靠，且 line-height、margin、字体抗锯齿都会导致像素级偏差。推荐显式计算单条高度并复用。
- 先用 DevTools 测出一个
.scroll-item的精确高度（含 padding/margin），比如是48px - 设共
n条数据，则总高度为n × 48px；动画终点写transform: translateY(-n × 48px)，但更稳妥的是写translateY(-50%)并确保父容器高度为2 × n × 48px - 避免用
vh或百分比高度做基准，它依赖视口，而滚动区域往往嵌套在 flex/grid 布局中，容易失准 - 加
will-change: transform可防 iOS Safari 重绘卡顿
动态内容下，CSS alone 不够用
当消息列表由接口实时更新、长度不可预知时，纯 CSS 方案会立刻失效——你无法在运行时修改 @keyframes 或重算 translateX 值。此时必须引入极简 JS：
- 监听数据变更后，重新生成双份 DOM，并用
getBoundingClientRect().width获取真实宽度 - 动态改写
style标签内的animation-duration，或切换预设的 CSS 变量：animation: scroll var(--duration) linear infinite - 绝对不要用
innerHTML替换整个列表，会触发重排；用DocumentFragment批量插入新节点 - 如果项目已用 React/Vue，别强行塞 CSS 动画，用
useEffect或watch控制ref元素的style.animationDuration更可控
真正难的不是让文字动起来，而是让动的过程在任何设备、任何内容长度、任何刷新率下都不被用户的眼睛抓住破绽。那些看似“多此一举”的双份结构、-50% 位移、手动测高，全是为了对抗浏览器渲染管线里的亚像素舍入和合成层切换延迟。
