结论：用transition控制动画时长和缓动，用transform做位移/缩放/旋转等视觉变化，两者配合才能实现高性能、不触发重排的悬停动画；直接改left、width等会触发重排导致卡顿，而transform由gpu加速且不触发重排。
直接说结论：用 transition 控制动画时长和缓动，用 transform 做位移/缩放/旋转等视觉变化，两者配合才能实现高性能、不触发重排的悬停动画。
为什么不能只写 hover 改 left 或 width
直接改 left、top、width、height 这类会触发浏览器重排（reflow）的属性，动画卡顿明显，尤其在中低端设备上。而 transform 仅影响合成层，由 GPU 加速，性能好得多。
- 错误写法：
.btn:hover { left: 10px; }—— 触发重排，不推荐 - 正确思路：
.btn:hover { transform: translateX(10px); }+ 提前声明transition - 必须搭配
transition才有过渡效果，否则transform变化是瞬时的
transition 的写法和常见陷阱
transition 不是“自动生效”，它只对「可计算的 CSS 属性」起作用，且需明确指定哪些属性参与过渡、持续多久、用什么缓动函数。
- 最简可用写法：
transition: transform 0.3s ease; - 避免写
transition: all 0.3s;—— 会无意中过渡颜色、边框等不需要动的属性，增加渲染负担 - 多个属性要过渡？写成逗号分隔：
transition: transform 0.3s, opacity 0.2s; - 别漏掉默认状态：必须在非
:hover元素上写transition，否则悬停时不会渐变（浏览器认为是从“无 transition”切到“有”，跳过过渡）
transform 常用值与浏览器兼容注意点
transform 是功能强大但容易误用的属性，它的值是函数式语法，且不同函数组合顺序会影响结果（比如 rotate 和 scale 谁在前，锚点表现不同）。
- 位移优先用
translateX()/translateY()，不是margin或position—— 后者仍可能触发重排 - 缩放写
transform: scale(1.1);，别写scaleX(1.1) scaleY(1.1)（除非你真需要非等比） - IE10+ 支持标准写法；IE9 需加
-ms-transform，但已基本可忽略 - 移动端 Safari 对
transform: rotateZ()支持稳定，但rotate(45deg)就够用，不用加 Z
一个真实可用的按钮悬停示例
下面这段代码能直接复制进项目，实现平滑右移 + 微缩放 + 阴影增强：
.card-btn {
display: inline-block;
padding: 8px 16px;
background: #007bff;
color: white;
border-radius: 4px;
/* 关键：在这里声明 transition */
transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
box-shadow 0.25s ease;
}
<p>.card-btn:hover {
/<em> 关键：只用 transform 和非重排属性 </em>/
transform: translateX(4px) scale(1.02);
box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
}</p>
注意 cubic-bezier 是为了比默认 ease 更自然——这种细节在交互动效里很关键，但多数人会忽略它是否真的被应用了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
