移动端CSS动画应优先使用transform和opacity，避免width、height等触发重排的属性；配合will-change优化图层，用@keyframes+class切换替代JS频繁操作style，可显著提升性能。
移动端 CSS 动画卡顿，很大概率是因为你正在用 width、height、margin、padding、top、left 这类会触发重排（reflow）的属性做动画。它们迫使浏览器每帧都重新计算布局，性能极差，尤其在中低端安卓机上明显掉帧。
优先使用 transform 和 opacity
这两个属性只触发布局和绘制阶段中的合成（compositing），由 GPU 加速，几乎不掉帧。
-
位移：用
transform: translateX(100px)替代left: 100px或margin-left: 100px -
缩放：用
transform: scale(1.2)替代width/height百分比变化 -
旋转：用
transform: rotate(45deg)，天然硬件加速 -
透明度：用
opacity: 0.5控制显隐，不要用visibility或display切换
给动画元素开启硬件加速（谨慎使用）
加 transform: translateZ(0) 或 will-change: transform 可让浏览器提前为该元素创建独立图层，提升合成效率。
- 推荐写法：
will-change: transform;（仅在动画前一刻设置，动画结束及时清除，避免内存占用） - 慎用
translateZ(0)：它会强制新建图层，过多会导致内存压力和过度绘制，仅在必要时加 - 可在 JS 中动态控制：
el.style.willChange = 'transform';→ 动画开始时设，animationend后设为空
避免在动画中读写布局（Layout Thrashing）
比如在 requestAnimationFrame 里一边改 offsetTop 一边又读 getBoundingClientRect()，会强制同步触发重排，严重拖慢帧率。
立即学习“前端免费学习笔记（深入）”；
- 所有读取布局的操作（
offsetHeight、scrollWidth、getComputedStyle等）尽量前置，在动画开始前一次性获取并缓存 - 写操作（如修改
style.transform）集中放在 rAF 回调末尾 - 用
element.getBoundingClientRect()前确认是否真需要——很多时候用 CSS 自身逻辑就能规避
用 CSS @keyframes + class 切换代替 JS 动态改 style
直接操作 el.style.transform 虽快，但大量频繁设置仍可能触发 style dirty flag；而通过添加预定义动画 class 更稳定、更易维护。
- 定义好动画：
@keyframes slideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } } - 用
el.classList.add('animate-slide')触发，CSS 内部用animation: slideIn 0.3s ease-out - 配合
animation-fill-mode: forwards保持最终状态，避免 JS 补位
