文字“跳帧”或闪回的根本原因是动画终点未与起点对齐，导致循环断层；必须使位移距离等于文字总宽（非容器宽），或复制文字拼接后用transform从0移至-50%，并禁用left/margin-left以防重排。
用 @keyframes 定义位移动画时，为什么文字会“跳帧”或闪回？
根本原因是动画终点没和起点对齐，导致循环断层。比如从 translateX(0) 动到 translateX(-100%)，但容器宽度不等于文字总宽，-100% 就不是真正“走完一整段”。
- 必须让动画位移距离 = 文字内容总宽度（不是父容器宽度），否则会卡顿或跳回
- 最稳妥做法是把文字复制一遍拼接：
文本文本，再让动画从 0 移动到 -50%，这样视觉上无缝 - 避免用
left或margin-left做动画，重排开销大，transform更高效
如何用 white-space: nowrap 和 overflow: hidden 控制显示范围？
跑马灯本质是“固定窗口 + 滚动内容”，这两条 CSS 是裁剪和防换行的关键。
-
white-space: nowrap防止文字在容器内折行，保证所有文字在一行内 -
overflow: hidden裁掉超出容器的部分，否则滚动时会看到溢出内容 - 容器需设明确宽度（如
width: 300px），不能依赖fit-content，否则动画位移基准不稳
为什么用 animation: marquee 10s linear infinite 时速度不匀速？
常见错因是用了默认的 ease 缓动函数，开头慢、结尾快，造成“一顿一顿”的观感。
- 必须显式写
linear，确保匀速运动 - 动画时长（如
10s）要根据文字长度调整：文字越长，时间越长，否则太快看不清 - 别用
animation-play-state: paused在 hover 时暂停——部分浏览器有渲染 bug，建议用animation-duration: 0s临时冻结
兼容性与可访问性要注意什么？
无限动画对部分用户会造成眩晕，WCAG 2.1 明确要求提供暂停机制，且旧版 Safari 对 transform 动画支持有限。
- 加
@media (prefers-reduced-motion: reduce)关闭动画，这是强制项 - Safari 13.1+ 才完整支持
transform的infinite循环，iOS 13.4 之前可能闪退，建议加-webkit-前缀 - 不要把关键信息放跑马灯里——屏幕阅读器通常忽略
aria-hidden="true"的滚动区域，且动画中文字不可选、不可复制
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
