移动端transition动画卡顿的根本原因是使用left、top等布局属性触发重排重绘，仅transform和opacity可走GPU合成层；正确写法是显式声明transition: transform 0.3s ease, opacity 0.3s ease，并配合will-change动态设置及避免JS强制同步layout。
为什么移动端 transition 动画一卡一顿
根本原因是浏览器在动画过程中触发了重排（layout）和重绘（paint），尤其是用了 left、top、width、height、margin 这类布局属性。这些属性变化会强制浏览器同步计算样式、重新布局整个文档流，低端安卓机上帧率直接掉到 20fps 以下。
真正能走 GPU 合成层、跳过 layout/paint 的只有两个属性：transform 和 opacity。其他所有属性加 transition，本质上都是“软件动画”，不解决就永远卡。
transition 必须只作用于 transform 和 opacity
写法错误的典型例子：transition: all 0.3s 或 transition: left 0.3s —— 前者会让所有属性都尝试过渡，后者直接命中高成本属性，两者都会让动画降级。
- 正确写法是显式声明：
transition: transform 0.3s ease, opacity 0.3s ease - 位移用
transform: translateX(100px)替代left: 100px；缩放用transform: scale(1.2)替代width: 120% - 旋转动画必须用
transform: rotate(45deg)，不要试图靠margin-left模拟 - 如果同时需要位移+缩放+透明度变化，把它们写进同一个
transform值里：transform: translateX(50px) scale(0.95) rotate(-2deg)，别拆成多个transform声明
will-change 不是开关，是手术刀
will-change: transform 的作用是提前告诉浏览器：“这个元素接下来要动，你早点给它单独建个合成图层”。但它本身会吃内存、增加图层管理开销，在移动端尤其敏感。
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
立即学习“前端免费学习笔记（深入）”；
- 只对持续动画的元素动态添加，比如轮播容器、下拉菜单根节点、模态框遮罩层
- 动画开始前加：
element.style.willChange = 'transform'；动画结束立即清：element.style.willChange = 'auto' - 绝对不要写
will-change: all，也别对body或列表项批量加 - 现代 Chrome/Safari 中，
transform: translateZ(0)或translate3d(0, 0, 0)效果已弱化，仅作兼容老版本备用，不必强加
容易被忽略的 JS 干扰点
即使 CSS 写得再规范，一段不经意的 JS 也可能让动画突然卡住——因为强制同步 layout。
- 避免在动画进行中读取
offsetTop、getBoundingClientRect()、scrollHeight等触发 layout 的属性 - touch 事件监听器没设
{ passive: true }，iOS Safari 会阻塞合成线程，导致首帧延迟 - 动画逻辑若由 JS 控制（如 scroll 触发视差），务必用
requestAnimationFrame节流，别用setTimeout或setInterval - 检查是否有 class 切换冲突：比如同时给一个元素加了
transition: transform又写了@keyframes spin，且没控制好animation-fill-mode和播放状态
最可靠的验证方式：打开 Chrome DevTools → Rendering 面板 → 勾选 “Paint flashing” 和 “Layer borders”，看动画时是否只有目标元素闪绿边、无大片黄色重绘区域。否则说明还有 layout 或 paint 没躲开。
