移动端CSS动画最稳方案是用transform和opacity触发GPU加速，避免left/top等引发重排的属性；禁用:hover过渡；duration设为200–250ms；明确声明过渡属性而非all；will-change按需动态添加并及时清除。
transition 用 transform 和 opacity 最稳
移动端浏览器对 transform 和 opacity 的动画支持最好，因为它们能触发硬件加速（GPU 渲染），不触发重排（reflow）和频繁重绘（repaint）。一旦你给 transition 加在 left、top、width、height、background-color 这类属性上，动画大概率卡顿——这些属性变更会强制浏览器同步计算布局和样式。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把
left: 100px → 200px改成transform: translateX(100px) → translateX(200px) - 隐藏元素别用
visibility: hidden或display: none配合 transition，改用opacity: 0+pointer-events: none - 避免同时过渡多个非合成属性，比如
transition: width 0.3s, height 0.3s, background-color 0.3s
别在 :hover 上写 transition（移动端没 hover）
很多 CSS 是从 PC 端直接搬过来的，写了 :hover 触发动画，结果在 iOS/Android 上完全不生效，或者只在第一次点击后“伪触发”一次。移动端没有持续 hover 状态，且部分 Safari 会延迟或忽略伪类过渡。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
:active做点击反馈（适合按钮按压） - 用 JavaScript 控制 class 切换，比如
el.classList.add('is-open')，再对.is-open写 transition - 确保触发动画的 class 是通过
touchstart或click显式添加，而不是依赖伪类
transition-duration 别设太短或太长
小于 100ms 的过渡在低端 Android 上常被跳过或合并帧；超过 300ms 又会让用户觉得响应迟滞。iOS 上尤其敏感，Safari 对 sub-120ms 的 transition 有优化裁剪行为。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 默认用
transition-duration: 0.2s或0.25s（即200ms–250ms） - 避免写
transition: all 0.3s—— 它会把所有可动画属性都拉进过渡队列，包括你没想动的box-shadow、border-color等 - 明确写出要过渡的属性：
transition: transform 0.25s ease, opacity 0.25s ease
强制开启 GPU 加速但别滥用 will-change
will-change: transform 能提前告诉浏览器“这个元素要动了”，促使它提前分配图层。但它不是万能药：滥用会导致内存占用飙升、页面滚动变卡，尤其在列表项多或频繁进出视口时。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 只在真正需要过渡的元素上加：
will-change: transform或will-change: opacity - 动画开始前加，结束后立刻移除（用 JS）：
el.style.willChange = 'transform'; setTimeout(() => { el.style.willChange = 'auto'; }, 300); - 不要对
* { will-change: transform }全局设置，也不要在伪类里写:hover { will-change: transform }
实际卡顿往往不是单点问题，而是 transform + opacity + will-change + 合理 duration 四者没对齐。最常被忽略的是：动画结束没清掉 will-change，导致后续滚动也变沉。
