根本原因是浏览器移动端默认不为非合成层元素开启硬件加速，导致滚动被迫走主线程重排重绘；需用translate3d(0,0,0)+will-change动态控制GPU加速，并避免border-radius等降级属性。
为什么 marquee 或 transform: translateX() 在移动端滚动会卡顿
根本原因不是“动画太复杂”，而是浏览器在移动端默认不为非合成层元素开启硬件加速，导致滚动文字被迫走主线程重排重绘。尤其当父容器有 overflow: hidden、文字含阴影或使用了 font-smooth 等渲染增强时，帧率极易跌破 30fps。
常见错误现象包括：文字突然跳帧、滚动速度不匀速、快速滑动页面时文字直接暂停。
-
安卓 WebView（尤其旧版）对
will-change: transform支持不稳定，盲目加反而引发闪烁 - iOS Safari 对
transform: translate3d(0, 0, 0)的触发更敏感，但需确保元素不被其他 CSS（如filter）降级回软件渲染 - 文字内容动态更新（如实时新闻跑马灯）时，频繁 DOM 操作会阻塞合成器线程
用 transform: translate3d() + will-change 正确触发 GPU 加速
关键不是“加了就行”，而是加在对的时机、对的元素、配合对的清理逻辑。
推荐写法（以水平滚动为例）：
立即学习“前端免费学习笔记（深入）”；
.scroll-text {
transform: translate3d(0, 0, 0);
will-change: transform;
/* 必须移除可能触发重排的属性，如 width: fit-content */
}
@keyframes scroll-move {
from { transform: translate3d(100%, 0, 0); }
to { transform: translate3d(-100%, 0, 0); }
}
-
translate3d(0, 0, 0)比translateZ(0)更可靠，避免 iOS 15.4+ 的部分兼容问题 -
will-change: transform建议只在动画开始前通过 JS 动态添加，动画结束后立即移除，否则长期占用 GPU 内存 - 禁止在该元素上设置
border-radius、box-shadow或background: linear-gradient()，这些会强制合成层回退
用 requestAnimationFrame 替代 CSS 动画控制滚动节奏
CSS 动画在低端 Android 设备上容易因时间函数抖动导致卡顿；而 JS 驱动可主动丢帧保节奏，更适合动态内容。
