推荐使用 transform: translate() 配合 transition 实现 GPU 加速动画，避免 left/top/margin 触发重排；transition 必须作用于 transform 属性本身；可选 will-change: transform 或 translateZ(0) 提升图层。
元素位移变化不连贯，通常是因为直接修改 left、top 等布局属性触发了浏览器的重排（reflow），导致动画卡顿或掉帧。推荐改用 transform: translate() 配合 transition，让位移走合成层（compositor layer），实现 GPU 加速、60fps 流畅动画。
用 transform 代替 top/left/margin
避免修改影响文档流的属性。例如：
- ❌ 不推荐：修改
left: 100px或margin-left: 100px—— 触发重排 - ✅ 推荐：用
transform: translateX(100px)—— 只触发重绘（paint）甚至纯合成（composite）
transition 要写在可变换的属性上
transition 必须作用于 transform 本身，而不是其他无关属性：
.box {
transition: transform 0.3s ease; /* ✅ 正确：监听 transform 变化 */
}
.box:hover {
transform: translateX(100px) translateY(-20px);
}如果写成 transition: all 0.3s 或只写 transition: left 0.3s，效果可能失效或不流畅。
立即学习“前端免费学习笔记（深入）”；
开启硬件加速（可选但有效）
对频繁动画的元素，加 will-change: transform 或 transform: translateZ(0) 提前提示浏览器提升图层：
-
will-change: transform;—— 更语义化，但建议只在动画前动态添加，避免滥用 -
transform: translateZ(0);—— 兼容性好，简单粗暴，常用于“强制开启 GPU 加速”
注意 transform 的叠加与重置
多次设置 transform 会覆盖而非累加。比如：
- 先设
transform: rotate(10deg)，再设transform: translateX(50px)→ 旋转丢失 - 正确做法：合并写成
transform: rotate(10deg) translateX(50px) - 如需动态控制，可用 CSS 自定义属性 +
calc()，或 JS 拼接字符串（谨慎更新）
