跑马灯无限循环的关键是设置 animation-iteration-count: infinite 并配合 animation-timing-function: linear，否则无法真正无缝滚动；必须用 translateX 配合复制内容实现视觉连续，避免 margin-left 或 left + transition 的卡顿缺陷。
跑马灯无限循环的关键是 animation-iteration-count: infinite
不设这个属性，动画默认只播一次就停。哪怕 translateX 值写得再大、再绕，没它就不是“无限”。另外必须配 animation-timing-function: linear，否则加速减速会让位移不连贯，一眼看出断点。
常见错误：用 margin-left 或 left 配 transition 模拟滚动——这本质是单次位移+重置，容易卡顿、跳帧，且无法真正无缝。CSS 动画走的是合成层，translateX 才是硬件加速的正解。
-
animation-duration越长，滚动越慢；建议从10s起调，根据内容长度微调 - 容器需设
overflow: hidden，否则滚动时边缘会漏出 - 子元素（文字或图片）必须用
white-space: nowrap防止换行打断连续性
translateX 的起始与终点值必须匹配视觉位移
比如一行文字宽 800px，你想让它从右到左匀速滚完，就得让动画把元素从 translateX(100%) 移到 translateX(-800px) ——但更稳妥的做法是统一用百分比：起点 translateX(100%)，终点 translateX(-100%)，前提是父容器宽度固定，且子元素宽度 ≥ 父容器宽度 × 2，否则会露出空白。
容易踩的坑：@keyframes 里只写 0% { transform: translateX(0) } 和 100% { transform: translateX(-100%) }，结果文字只挪了一半就回弹。这是因为 -100% 是相对于自身宽度，不是父容器。真要精准控制，得先用 JS 测子元素总宽，或手动设一个足够大的负值（如 -2000px），再配合 animation-timing-function: linear 保匀速。
立即学习“前端免费学习笔记（深入）”；
多行/多图跑马灯必须用复制内容实现无缝
单行文本靠 CSS 还能凑合，但图片流或两行文字想无缝，光靠一个元素 translate 不够。真实做法是：把内容复制一份拼在后面，让动画滚动距离刚好等于一份内容的宽度，这样第二份内容刚进视口时，第一份刚好退出，视觉上就接上了。
示例结构：
<div class="marquee">
<div class="marquee-content">
<span>新闻1</span><span>新闻2</span><span>新闻3</span>
<span>新闻1</span><span>新闻2</span><span>新闻3</span>
</div>
</div>
然后对 .marquee-content 做 translateX 动画，位移量设为单份内容总宽（比如 -600px）。注意两份之间不要留空格，否则会多出间隙。
- 复制内容必须完全一致，包括空格、换行、内联样式
- 若用 Flex 布局排子项，记得加
flex-wrap: nowrap - 移动端要注意
transform: translateX()在 Safari 旧版可能触发重排，加will-change: transform可缓解
移动端 touch 暂停和 hover 暂停需要额外监听
CSS 动画本身不响应交互，要暂停得靠 JS 切换 class 控制 animation-play-state。比如 hover 暂停只需加一条规则：.marquee:hover .marquee-content { animation-play-state: paused; }。但 iOS Safari 对 :hover 支持弱，真要可靠暂停，得监听 touchstart 和 touchend，切 class 并存状态。
别直接用 animation-play-state: paused 写死在初始样式里——那样动画压根不会启动。必须动态加 class 触发。
另一个坑：多个跑马灯共用同一套动画名但 duration 不同，会导致浏览器复用缓存帧，出现速度错乱。解决方案是给每个实例生成唯一动画名，或用 animation-name + animation-duration 组合声明，避免命名冲突。
transform: translateZ(0) 强制 GPU 加速，比反复调 duration 更省时间。 
