text-overflow: ellipsis 与跑马灯冲突，需禁用 white-space: nowrap 并配合 overflow: hidden、固定宽容器；动画须用 transform: translateX() 替代 left，加 -webkit-transform 和 will-change: transform 保障 iOS 兼容；循环用 animation: infinite + 关键帧闭环，避免闪动。
text-overflow: ellipsis 不起作用？先关掉 white-space
跑马灯本质是让文本“动起来”，不是“截断显示”，所以 text-overflow: ellipsis 和它完全冲突。一旦用了 ellipsis，浏览器会强制截断并加省略号，动画根本没机会触发。
必须确保文本能自然撑开容器宽度，才能平移。关键点是：white-space: nowrap（禁止换行）+ overflow: hidden（隐藏溢出）+ 容器设固定宽（不能是 fit-content 或 auto）。
-
display: inline-block或display: block都可以，但别用inline（无法设宽） - 父容器要设
overflow: hidden，否则滚动会撑出页面 - 文本内容不能含
<br>、\n或其他强制换行符
@keyframes translateX 动画卡顿？用 transform 而非 left
用 left 或 margin-left 做位移会频繁触发重排（reflow），尤其在长文本或低性能设备上明显掉帧。必须用 transform: translateX()，它走合成层，GPU 加速，顺滑得多。
注意：动画起点和终点要形成闭环，否则最后一帧会跳回原位。常见写法是让元素从右边界外开始（translateX(100%)），移到左边界外结束（translateX(-100%)），再靠 animation-timing-function: linear 保证匀速。
立即学习“前端免费学习笔记（深入）”；
- 别写
from { transform: translateX(0) }→to { transform: translateX(-100%) }，这样文本只动一半就停了 - 动画时长建议 ≥ 10s，太短人眼跟不上，还容易闪
- 如果文本很短，
-100%可能不够移出视野，可改用具体像素值如translateX(-200px)
怎么让动画循环不闪？用 animation-iteration-count 和 animation-delay
单次动画播完后默认停在终点，下一次播放会从头跳到起点，造成“闪一下”。解决方法不是靠 JS 重置，而是用 CSS 自身的循环控制。
核心是两个配合：animation-iteration-count: infinite（无限循环） + animation-delay 控制首帧延迟。但更稳的做法是让动画本身包含“暂停”阶段：比如前 80% 时间移动，后 20% 停在末端，再跳回起点重新开始——这样视觉上就是无缝衔接。
- 推荐写法：
animation: marquee 20s linear infinite，然后在@keyframes marquee中定义 0%→100% 的完整位移 - 避免用
animation-fill-mode: forwards，它会让最后一帧“锁住”，破坏循环 - 若需鼠标悬停暂停，直接加
hover { animation-play-state: paused }即可
移动端 Safari 不动？加 -webkit-transform 和 will-change
iOS Safari 对 transform 动画有更严格的触发条件，尤其在 position: static 元素上可能直接不渲染动画。必须加 -webkit-transform 前缀，并显式告诉浏览器这个元素要动。
will-change: transform 是关键，它提前提示浏览器该元素将发生变换，促使它创建独立图层。没有这句，某些 iOS 版本（尤其是 15.x 之前）会静默降级为无动画。
- 必须同时写
transform: translateX(...)和-webkit-transform: translateX(...) -
will-change只对动画元素本身设置，别加在父容器上 - 别滥用
will-change，只在确实需要动画的元素上加，否则内存开销变大
transform 的取值方式、will-change 的作用范围和 @keyframes 的百分比节奏里。 
