应优先使用 transform: translate() 配合 transition 实现位移动画，避免 left/top 触发回流导致卡顿；transform 仅触发重绘或图层合成，性能更优，兼容 IE10+，且需在初始状态写 transition、目标状态改 transform 值。
直接用 transform: translate() 配合 transition，别碰 left/top——后者触发布局重排，卡顿明显，尤其在移动端。
为什么不能用 left/top 做移动过渡
浏览器对 left、top 这类布局属性的修改，会强制触发「回流（reflow）」：重新计算元素位置、尺寸、文档流关系。哪怕只是 1px 的变化，也可能连带影响兄弟/父级元素，动画一卡一卡的。
transform 则不同，它只作用于合成层（compositing layer），GPU 可加速处理，只触发「重绘（repaint）」甚至更轻量的图层合成，60fps 更稳。
- 实测对比：同个 div 移动 200px，
left: 200px在低端安卓机上帧率常掉到 30–40fps；transform: translateX(200px)能稳定 58–60fps - 兼容性没问题：
transform和transition在 IE10+、所有现代浏览器均支持 - 注意：若元素本身没脱离文档流（比如是
static定位），transform不会影响其他元素布局——这是优点，不是 bug
transition + transform 的最小可用写法
关键就三行 CSS：transition 必须写在「初始状态」里，不是 hover 或 active 里；transform 改变值要写在「目标状态」中（如 :hover）。
立即学习“前端免费学习笔记（深入）”；
.move-box {
width: 100px;
height: 100px;
background: #3498db;
/* 这里声明过渡：只对 transform 生效，0.3 秒，ease-out 曲线 */
transition: transform 0.3s ease-out;
}
.move-box:hover {
/* 这里改变 transform 值，浏览器自动补间 */
transform: translateX(120px) translateY(-20px);
}-
transition中省略transition-timing-function会默认用ease，但ease-out更适合位移收尾——有“停住感” - 别写
transition: all 0.3s：万一后续加了color或font-size，它们也会被强行过渡，可能造成意外动画 - 如果要 Y 轴单独控制（比如只上下浮动），用
transform: translateY(-10px)比transform: translate(0, -10px)更清晰
移动起点偏移：别忘设 transform-origin
默认 transform-origin 是 50% 50%（中心点），大多数情况够用。但如果你做的是「从左边缘滑入」「绕左上角旋转后平移」这类效果，起点不对，动画就会错位。
例如一个侧边菜单从屏幕外左滑进：
.sidebar {
position: fixed;
top: 0;
left: 0;
width: 280px;
transform: translateX(-280px); /* 初始藏在左边 */
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* 自定义快出慢入 */
}
.sidebar.open {
transform: translateX(0);
}
/* 关键：让 transform 以左侧为基准，避免内容“漂” */
.sidebar {
transform-origin: left center;
}-
transform-origin影响的是整个transform函数族（rotate、scale、skew都受它约束），不单为translate - 值写成
left center比0 50%更易读，语义明确 - 如果用了
scale再加translate，且没调transform-origin，缩放中心和位移参考点不一致，容易出现“抖动”或偏移偏差
真正要注意的，是把 transform 当作位移动画的唯一入口，而不是“又一种可选方案”。它不是语法糖，是性能分水岭。哪怕只是做个悬停小位移，也值得多敲那几个字母——translateX 比 left 多一次 GPU 调度，却少掉十次 layout 计算。
