按钮无缩放动画因漏写transition且未置于常态规则中；须在基础选择器声明transition: transform 0.2s ease-in-out，缩放值推荐1.03，多transform需合并，移动端需用:active或js模拟。
没动画？八成是漏写了 transition，而且它必须写在常态规则里，不能只塞进 :hover。
为什么按钮 hover 后直接跳变，没有缩放动画？
浏览器不会自动给 transform: scale() 加过渡——它只是个“瞬间变形”指令。只写 button:hover { transform: scale(1.04); }，结果就是悬停时硬切、移出时直接弹回，毫无缓动。
-
transition必须声明在按钮的基础选择器中，比如.btn或你自定义的类（如.btn-scale），而不是只放在:hover里 - 别用
transition: all 0.2s：它会让padding、border、font-size等意外属性也动起来，可能引发抖动或重排 - 正确写法示例：
.btn {<br> transform: scale(1);<br> transition: transform 0.2s ease-in-out;<br>}<br>.btn:hover {<br> transform: scale(1.03);<br>}
缩放值设多少才不糊、不挤、不卡？
缩放不是越大越好。Chrome/Firefox 在非整数缩放下会触发亚像素渲染，文字边缘发虚；超过 scale(1.05) 还容易撑破 .btn-group 或 .col 的布局节奏。
- 推荐值是
scale(1.03)—— 人眼可感知，又不破坏视觉稳定性 - 如果按钮已有其他
transform（比如rotate(2deg)或translateY(-1px)），不能单独写scale(1.03)，否则会覆盖；得合并：transform: rotate(2deg) scale(1.03) - 加
backface-visibility: hidden;可强制启用合成层，缓解模糊；will-change: transform;有帮助，但在 iOS Safari 上可能引发闪烁，慎用
移动端点一下就卡住？:hover 根本不靠谱
iOS Safari 和多数安卓浏览器不支持持续 :hover 状态。纯 CSS 缩放在触摸设备上基本失效：点下去放大，松手后不自动恢复，按钮“卡在放大态”。
- 简单补救：
.btn:active { transform: scale(0.95); }模拟按下反馈（注意是缩小） - 要一致体验，得用 JS：
touchstart加 class，touchend移除，再配.touched { transform: scale(1.03); } - 千万别同时写
:hover和:active缩放——触屏用户点一下，:active覆盖:hover，状态就锁死了 - Bootstrap 的
.btn-primary:hover权重很高，自定义样式要用完整类名，比如.btn.btn-primary.btn-scale:hover，否则压根不生效
真正容易被忽略的是缩放对布局的影响：按钮放大后可能压到相邻元素，这不是动画问题，而是文档流没预留空间——得靠父容器 padding、overflow: visible 或 transform-origin 微调，不真机测很难发现。
