css动画卡顿主因是transition作用于width、height、top等布局属性触发重排，应改用transform和opacity并验证gpu图层提升。
transition触发重排时主线程必然卡住
只要transition作用在width、height、top、left、margin这类会改变布局的属性上，浏览器每帧都得重新计算元素位置和流式布局——这个过程全在主线程跑，CPU一满载，动画就掉帧。低端安卓机上一次getBoundingClientRect()加top修改，就能吃掉 5–10ms，直接突破 16.67ms 的 60fps 红线。
别信“设个transition-duration: 0.1s就能快”，短时长反而让浏览器更频繁地挤进主线程做同步布局，用户感觉是“顿一下才动”。
- 用
transform: translateX()替代left，用transform: scale()替代width/height - 过渡前确保元素已脱离文档流（比如加
position: absolute或fixed），否则transform仍可能因父容器约束触发隐式重排 - 检查是否混用了
transform和left：哪怕只在 hover 状态里写了一次left: 0，整个 transition 都会降级回 CPU 渲染
transition: all 是主线程隐形杀手
transition: all 0.3s看着省事，实际等于告诉浏览器：“所有属性变化都走过渡引擎”。滚动中background-position-x每帧变几次，过渡队列就堆积几次；filter稍一更新，就得重绘整块区域。这些操作全压主线程，合成器根本来不及吞。
- 显式声明要过渡的属性：
transition: transform 0.2s, opacity 0.2s - 视差场景下，
background-position在旧 Android 上不硬件加速，优先改用transform: translateX()模拟 - 避免对
box-shadow、filter做 transition——它们虽不触发布局，但会强制重绘，且无法 GPU 加速
父容器正在悄悄拖垮你的 transition
就算你写了transform: translateZ(0)，如果父元素有overflow: hidden、filter: blur(1px)或backdrop-filter，子元素照样没法独立成层。浏览器只能把它和父容器一起扔进一个图层里软渲染，transition 就退化成逐帧 CPU 绘制。
- 打开 Chrome DevTools → Rendering → 勾选“Layer borders”，看动画元素是否标蓝；没蓝边，说明没升层
- 临时加
transform: translate3d(0, 0, 0)到父容器，比will-change更稳（尤其 IE11 / Android 4.4） -
will-change: transform不能提前移除：JS 动态加 class 后立刻 remove，浏览器根本来不及建图层
滚动中读写样式正在制造 layout thrashing
在scroll事件里一边改element.style.transform，一边立刻调offsetTop或getBoundingClientRect()，就是在逼浏览器每帧都做同步布局计算。iOS Safari 9–10 和 Android 4.4 WebView 对这种模式极度敏感，首帧就掉。
- 把“写样式”和“读尺寸”拆开：先批量写完所有
transform，下一帧再用requestAnimationFrame读 - 避免在 scroll 中动态加 class 后又立刻改
style.transform——过渡链断裂，动画退化为跳变 - 用 DevTools → Rendering → “Layout Shift Regions” 查有没有意外的布局波动区域
@import还没加载完、或者:hover触发了复杂 filter 计算。主线程被占着，transition 就只能排队等。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
