必须用 linear 才能匀速，否则默认 ease 会导致跑马灯卡顿；位移终点须为 -100% 或容器宽负值以实现无缝；需复制内容并紧挨拼接；iOS Safari 需加 translateZ(0) 规避渲染 bug。
animation-timing-function 用 linear 才能匀速，别用 ease
跑马灯卡顿、忽快忽慢，八成是 animation-timing-function 没设对。默认值 ease 会让元素起步慢、中间快、收尾又慢，视觉上就是“一顿一顿”。必须显式写成 linear，才能让位移全程匀速。
- 错误写法：
animation: marquee 10s infinite;（没声明 timing-function，走浏览器默认ease） - 正确写法：
animation: marquee 10s linear infinite; - 如果用
@keyframes单独定义，也要在@keyframes外层加linear，不能只靠 keyframes 里写from/to就以为够了
位移距离必须严格匹配容器宽度，否则会跳帧
无限循环的“无缝”感，本质是动画结束帧和起始帧完全重合。如果 transform: translateX() 的终点值不等于父容器宽度的负值，下一圈就会明显闪回或停顿。
- 假设容器宽
300px，子元素内容总宽600px，那动画应从0移到-300px（不是-600px） - 更稳妥的做法是用
100%：起点translateX(0)，终点translateX(-100%)，这样不依赖具体像素值，响应式也安全 - 别用
left或margin-left做位移——它们会触发重排，性能差，且在 flex/grid 容器里行为不可控
必须复制一份内容并拼接，单段内容无法真正无限
CSS 动画本身不支持“循环播放一段内容”，它只是来回播放关键帧。想实现视觉上连续滚动，得靠内容冗余：把原始内容复制一次，首尾相接，再用位移让它平滑过渡。
- HTML 结构要这样：文本文本文本文本
- 不能只靠一个
+infinite就指望它自动续上——动画播完就跳回起点，人眼看得见 - 复制的内容必须紧挨着，中间不能有空格或换行符，否则会多出空白间隙
- 如果内容动态生成，JS 插入时也要同步复制 DOM 节点，不能只复制字符串
移动端 iOS Safari 有渲染 bug，需加 transform: translateZ(0)
部分 iOS 版本（尤其是 iOS 15–16）下，纯 translateX 的跑马灯会出现卡顿、闪烁甚至直接不动。这不是代码写错了，是 WebKit 渲染管线的已知缺陷。
- 临时解法：给动画元素加
transform: translateZ(0)或will-change: transform - 注意
translateZ(0)要写在动画元素上，不是父容器；且不能和translateX写在同一行声明里（避免被覆盖），建议拆成两条 CSS 声明 - 这个 hack 在桌面 Chrome/Firefox 无影响，但 Android Chrome 不需要它——只针对 iOS Safari 有效
跑马灯看着简单，真正做到“不跳、不卡、不闪、不掉帧”，每个环节都得抠像素级细节。尤其复制内容那段、iOS 的 Z 轴 hack，漏掉一个，上线后用户一眼就能感觉到不对劲。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
