必须在基础选择器中声明transition，而非仅:hover中；需统一transform值类型并完整声明初始状态，如.translateY(0)，否则动画断裂或卡顿。
hover 触发 transform 时出现卡顿或跳变
直接写 :hover { transform: scale(1.1); } 通常不会动，因为缺少过渡声明。浏览器默认不启用动画插值，transform 变化是瞬时的，人眼就会感知为“闪”或“跳”。必须显式加 transition 才能触发合成层和插帧渲染。
transition 应该写在哪个选择器上
必须写在**非 hover 的基础状态里**，而不是只写在 :hover 中。否则首次悬停会无过渡，第二次起才有——这是常见误操作。
-
正确：
.btn { transform: scale(1); transition: transform 0.3s ease; } .btn:hover { transform: scale(1.1); } -
错误：
.btn:hover { transform: scale(1.1); transition: transform 0.3s ease; }（首次悬停无动画）
为什么加了 transition 还是卡顿
可能原因不止一个：
-
transform值类型不一致，比如从scale(1)到translateX(10px) scale(1.1)，中间缺少初始translateX(0)，导致浏览器无法插值 - 同时过渡多个属性但没指定具体项，如
transition: all 0.3s，会拖慢性能，尤其影响width、height等触发布局的属性 - 元素未启用硬件加速，可在基础状态加
transform: translateZ(0)或will-change: transform（慎用，仅对频繁动画元素）
推荐的最小可用 transition 写法
兼顾兼容性与可维护性，避免过度优化：
立即学习“前端免费学习笔记（深入）”；
.card {
transform: scale(1);
transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.card:hover {
transform: scale(1.03) translateY(-2px);
}
注意：cubic-bezier(0.25, 0.46, 0.45, 0.94) 比默认 ease 更轻快自然；translateY(-2px) 和 scale 同时用时，务必确保基础态也含 translateY(0)，否则动画会断裂。
真正容易被忽略的是：所有 transform 组合值必须在基础态完整声明，哪怕值为 0 —— 浏览器不会自动补全。
