滚动动画卡顿主因是布局抖动、transition: all滥用、父容器破坏GPU合成及touch延迟；应避免同步读写样式、显式声明过渡属性、强制图层提升并优化事件监听。
滚动时transition卡顿，大概率是触发了 layout thrashing
滚动中动画卡顿，往往不是 transition 写错了，而是你无意中让浏览器在每一帧里反复做 layout 计算。比如在 scroll 事件里读取 offsetTop、getBoundingClientRect() 或写入 left/top 后立刻读尺寸——旧版浏览器（尤其是 iOS Safari 9–10、Android 4.4 WebView）对这种同步布局读取极其敏感，首帧就掉。
- 滚动监听里避免混合“写样式 + 立即读尺寸”，哪怕只读一次
- 用
requestAnimationFrame包裹读操作，并确保“先批量写，下一帧再读” - 检查是否在
scroll中动态加 class 后又马上改style.transform，过渡链会断裂，退化为跳变 - DevTools → Rendering → 勾选 “Layout Shift Regions”，看是否有意外的 layout 波动区域
transition: all 1s 是视差/滚动动画的隐形杀手
很多视差效果卡顿，根源就在那句看似无害的 transition: all 1s。它会让浏览器对 background-position-x、filter、width 等所有属性都启用过渡引擎——而滚动中 backgroundPositionX 每帧可能更新多次，过渡队列直接堆积，合成器被拖垮。
- 必须显式声明：例如
transition: transform 0.2s, opacity 0.2s，禁用all - 视差场景下，若只动背景位移，就只写
transition: background-position 0.3s（但注意 background-position 在部分旧 Android 上不硬件加速） - 更稳妥的做法是用
transform: translateX()模拟位移，再配transition: transform 0.3s
父容器的 overflow 或 filter 正在拖垮你的动画图层
即使你用了 transform，动画仍卡？很可能是父元素悄悄破坏了 GPU 合成。比如 overflow: hidden、filter: blur(1px)、backdrop-filter 这些属性会让子元素无法独立成层，被迫回退到 CPU 渲染。
- 打开 Chrome DevTools → Rendering → 勾选 “Layer borders”，看动画元素是否被正确标蓝（独立图层）
- 若没标蓝，检查父级是否含
overflow: hidden、filter、mask、clip-path - 临时加
transform: translate3d(0, 0, 0)或backface-visibility: hidden强制升层（IE11 下后者更稳） - 慎用
will-change: transform：它在 IE11 完全无效，在 Android 4.4 可能闪烁，不如直接上translate3d
移动端 touchstart 后延迟 300ms，动画根本没真正启动
iOS Safari 和部分安卓 WebView 在 touchstart 后默认等待 300ms 判定是否双击缩放，这期间主线程被阻塞，transition 的第一帧永远滞后。你看到的“卡顿”，其实是动画压根没开始。
立即学习“前端免费学习笔记（深入）”；
- 给 touch 事件加
{ passive: true }，禁用默认滚动阻塞 - 用
touch-action: manipulation告诉浏览器“这个区域只做点击/滑动，别等双击” - 滚动驱动的动画，优先用
IntersectionObserver替代scroll事件监听进入视口，避免高频触发 -
transitionend在 iOS Safari 9–10 可能丢失或延迟，务必加setTimeout兜底清理临时 class 或will-change
overflow: hidden、一次 getBoundingClientRect()、一句 transition: all，都可能让整段动画降级。 
