真正无缝的跑马灯需四细节对齐：①translatex()必须用百分比（如-100%）而非像素值；②配合white-space:nowrap防换行；③ios需拆写transform:translatex(0);transform:translatez(0);④animation必须显式声明linear。
直接用 @keyframes + transform: translateX() 就能做出真正无缝的跑马灯，但 90% 的人卡在跳帧、iOS 不动、或一缩放就错位——问题不在会不会写动画，而在四个细节没对齐。
为什么 translateX() 必须用百分比，不能写像素值
用 translateX(-300px) 看似直观，但容器宽度一变（比如响应式断点、横竖屏切换），动画位移就失准：文本还没滚完就跳回，或者滚过头卡半截。百分比是相对父容器宽计算的，translateX(-100%) 意味着“向左移动整整一个容器宽度”，这才是视觉无缝的物理基础。
- 必须配合
white-space: nowrap，否则换行会破坏文本总宽度计算 - 如果内容含图片或 inline-block 元素，需确保它们不触发换行或撑高行盒
- 移动端 Safari 对
%解析更稳定，像素值在 zoom 或 viewport 缩放时容易漂移
为什么 iOS 上动画不动或闪一下就停
iOS Safari 对合成层触发很敏感，transform: translateX(0) translateZ(0) 写在同一行会被忽略 translateZ(0)，导致无法启用 GPU 加速——动画降级到主线程渲染，直接卡死或跳帧。
- 必须拆成两条独立声明：
transform: translateX(0); transform: translateZ(0); - 不能只靠
will-change: transform，它在 iOS 上兼容性差，且可能引发重绘抖动 - 加
backface-visibility: hidden是保险做法，尤其当内容含透明度或阴影时
为什么动画必须显式写 linear，不能省略
浏览器默认的 ease 是缓入缓出，跑马灯就会“起步一顿、中间冲、结尾一刹”——人眼立刻识别为非匀速，失去滚动感。这不是 bug，是 timing function 的设计本意。
- 错误写法：
animation: scroll 12s infinite;（没声明 timing function，走默认ease） - 正确写法：
animation: scroll 12s linear infinite;或在元素上额外加animation-timing-function: linear; - 即使
@keyframes只写了from/to，linear也必须显式声明，它控制的是动画播放节奏，不是关键帧插值方式
为什么单段文本永远做不到视觉无缝
CSS 动画播完 100% 就强制跳回 0%，这是底层机制。所谓“无缝”，本质是让第二段内容紧接第一段末尾，动画位移距离刚好等于容器宽度，这样播到末尾时，第二段开头正好顶上来。
- 最简方案：HTML 里复制一遍内容，如
<span>文本文本</span> - 别依赖
padding-left: 100%模拟起始偏移——它只对 inline 元素有效，flex/grid 子项下失效 - 动态内容（如 API 返回的公告）必须用 JS 测量真实
scrollWidth后动态设animation-duration，否则速度和长度不匹配，滚动快慢失衡
真正难的不是写出第一版动画，而是让不同机型、不同缩放、不同网络延迟下的文字都稳稳地匀速滑过去——那几个百分号、那两条 transform 声明、那个被很多人删掉的 linear，才是生产环境里不被 QA 打回来的关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
