仅用 transform 和 opacity 实现 transition 可触发 GPU 合成层优化，避免 layout 与 paint；需显式声明初始值、禁用冲突属性、隔离渲染边界，并避免使用 transition: all 或盒模型属性。
只用 transform 和 opacity 做 transition
浏览器对这两个属性做了特殊优化：它们不参与 layout 计算，也不触发全量 paint，而是走合成层（compositor），由 GPU 直接处理。其他属性哪怕只是 color 或 background-color，都属于 paint 阶段，高频变化时帧率容易波动。
-
transform包括translateX、translateY、scale、rotate等，但注意transform: translateZ(0)本身不动画，仅用于图层提升 -
opacity必须是小数值（如0.5），opacity: 50%是非法写法，会静默失效 - 别混搭：比如同时写
left: 10px和transform: translateX(10px)，left仍会触发布局计算
避免 transition: all 或宽泛简写
写 transition: all 0.3s 看似省事，实际等于把所有可动画属性都拉进过渡队列。hover 时哪怕只改了 z-index 或 cursor，也可能意外触发冗余过渡，造成卡顿或状态错乱。
- ✅ 正确写法：
transition: transform 0.3s ease, opacity 0.3s ease - ❌ 错误写法：
transition: 0.3s（隐式等价于all）、transition: margin 0.3s（margin是简写，内部可能拆成四个方向） - JS 动态加样式时也一样：别用
el.style.transform = '...'后又补一句el.style.width = '...'，后者立刻破坏优化路径
慎用 height、width、top、left 过渡
这些属性直接修改盒模型，每次变化都强制浏览器重跑 layout 流水线。哪怕只是 height: auto → 200px，transition 也会静默失败——因为 auto 不可插值。
- 替代
height动画：用max-height（需预设足够大的上限值，如max-height: 500px）或transform: scaleY()+overflow: hidden - 替代
top/left：统一换成transform: translateY()/translateX() - 移动端尤其注意：iOS Safari 对小数位移敏感，
translateX(0.001px)可能被忽略，建议步进 ≥0.01px或直接用整数
父容器要预设尺寸并隔离渲染边界
就算子元素只用 transform，如果父容器没设 overflow: hidden 或 contain: layout，动画溢出仍可能推挤兄弟节点，导致“呼吸感”抖动。
立即学习“前端免费学习笔记（深入）”；
- 给动画容器加
overflow: hidden是最简单有效的隔离方式 - 避免父级有
filter、clip-path或非 identity 的transform（如rotate(0.1deg)），它们会压制子元素的合成层提升 - 初始
transform值必须显式写出，比如transform: translateY(0)，否则第一帧可能出现跳变
