transition必须作用于transform而非left/top，因transform触发GPU加速且避免重排；需显式声明所有过渡的transform函数，注意执行顺序影响效果，并谨慎使用will-change提示升层。
transition 要作用在 transform 上，而不是 left/top
直接改 left 或 top 触发的是布局重排（reflow），性能差，动画卡顿；而 transform 属于合成层操作，走 GPU 加速，过渡才真正平滑。所以位移和旋转必须统一用 transform: translateX() rotate() 组合，再配 transition。
常见错误是写成这样：
.box {
left: 0;
transition: left 0.3s ease;
}
.box.active {
left: 100px;
}这不会触发硬件加速，且在移动端极易掉帧。正确写法是：
.box {
transform: translateX(0) rotate(0deg);
transition: transform 0.3s ease;
}
.box.active {
transform: translateX(100px) rotate(45deg);
}多个 transform 函数要写在同一行，顺序影响结果
transform 是一个复合属性，浏览器按书写顺序依次执行：先平移再旋转，和先旋转再平移，视觉效果完全不同。比如：
立即学习“前端免费学习笔记（深入）”；
-
transform: translateX(100px) rotate(45deg)：先向右移 100px，再绕自身中心转 45° -
transform: rotate(45deg) translateX(100px)：先转 45°，再沿新 X 轴方向移动 100px（实际是斜向右上）
多数场景下你想要的是“位移后旋转”，所以把 translate 放前面更直观。但若需绕某点旋转+偏移（如绕左上角旋转），就得调整顺序或配合 transform-origin。
transition 不会自动补全未声明的 transform 值
如果初始状态只写了 transform: translateX(0)，激活态加了 transform: translateX(100px) rotate(45deg)，浏览器不会“记住”初始 rotate(0deg)，而是从 none 插值到 rotate(45deg)，导致旋转突兀或错位。
必须显式写出所有参与过渡的函数，哪怕值为 0：
.box {
transform: translateX(0) rotate(0deg) scale(1);
}
.box.active {
transform: translateX(100px) rotate(45deg) scale(1.2);
}否则 scale 或 skew 等未声明的项会被丢弃，过渡中断。
用 will-change 提示浏览器提前升层（谨慎使用）
当元素频繁做 transform 动画时，加 will-change: transform 可让浏览器提前把它放到独立图层，减少绘制开销。但滥用会导致内存浪费和渲染异常。
只在确实有性能问题、且动画持续时间较长的元素上加：
.box {
will-change: transform;
}
.box.active {
/* transition 依然要写在 transform 上 */
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}注意：will-change 不是“开启硬件加速”的开关，它只是提示；真正起效的仍是 transform 本身。动画结束建议用 JS 移除该属性，避免长期占用图层资源。
过渡是否平滑，关键不在写了多少个 transform 函数，而在于是否始终控制同一组属性、是否规避了 layout 触发、以及是否理解顺序与初始值的隐含行为。
