top动画必卡，因其每帧强制触发重排导致主线程持续高负载；应改用transform: translate()仅走GPU合成，耗时从20–30ms降至1–3ms，且须归零初始定位并避免混用非合成属性。
因为 transform 不触发重排（reflow），而 top 会——这是卡顿和掉帧的根源，不是“推荐”，是性能底线。
为什么 top 动画每帧都卡
top 是布局属性，浏览器必须在每次修改时重新计算元素在文档流中的位置、父容器是否被撑开、兄弟元素是否要重排。哪怕元素是 position: absolute，iOS Safari 17+ 和 Chrome 125+ 仍会执行约 1–3ms/帧的轻量级 layout。滚动中叠加多个 top 动画，主线程很快饱和，帧率跌破 45fps 是常态。
DevTools Performance 面板里能看到密集的黄色 Layout 块；而换成 transform: translateY() 后，这些块基本消失，只剩绿色 Composite Layers。
-
top: 20px是真实位移，引擎要校验 margin/border/padding 对父容器高度的影响 -
transform: translateY(20px)是纯视觉偏移，GPU 直接挪图层，DOM 几何信息完全不动 - 实测同个 3 秒动画：
top方案累计 layout 耗时约 80ms，transform仅约 8ms
不能直接替换 top 为 transform
常见错误是保留 top: 20px; left: 30px;，只把动画部分改成 transform: translateX(100px)——这会导致最终位置是两者叠加（下移 120px），且动画起点漂移。
立即学习“前端免费学习笔记（深入）”；
- 必须先归零基础定位：
top: 0; left: 0; - 再用
transform: translate(30px, 20px)表达全部位移 - 如果父容器没设
position: relative，absolute子元素已脱离预期上下文，transform也救不回来 - JS 控制时，避免写
el.style.top = '100px'，改用el.style.transform = 'translateY(100px)'
移动端还有两个隐藏坑
iOS Safari 对 translateX(0.3px) 这类亚像素步进有轻微抖动，不是 bug，是 WebKit 合成器对 2D transform 的精度妥协；更隐蔽的是点击区域错位：视觉上元素被 transform 移动了，但触摸响应仍落在原始盒边界上，尤其当父容器有 transform: scale(0.9) 时，hit area 会严重偏移。
- 抖动解法：
transform: translate3d(0, 0, 0)强制启用 3D 上下文，绕过亚像素限制 - 点击错位检查点：用 DevTools 的 “Toggle device toolbar” + “Show hit test borders” 查看实际响应区域
-
will-change: transform别静态写死在 CSS 里，只在动画开始前 JS 设置，结束后立刻清除，否则长期占用 GPU 图层内存
真正难的不是写出 transform，而是判断这个位移是“固定在视口里动”还是“随内容滚动渐显”——前者用 transform + will-change 就够；后者必须配 IntersectionObserver，否则滚动一卡，动画就断。
