90% 无动画因漏写或错放 transition，它必须在常态样式中声明；scale 值推荐 1.02–1.05，超限易引发布局错乱与渲染模糊；触屏需用 :active 或 js 模拟反馈；缩放副作用可通过 backface-visibility、outline 和 filter 优化。
没动画？90% 是漏写了 transition，而且写错了位置——它必须出现在按钮的常态样式里，不能只塞在 :hover 中。
为什么只写 transform: scale(1.04) 没动画
浏览器看到 transform 就直接执行变形，不带任何缓动。动画靠的是 transition 告诉它：“这个属性要变，花 0.2 秒，用 ease-in-out 曲线”。如果只在 :hover 里写 transition，移出时会瞬间跳回原状；如果压根没写，那就只有“咔”一下的硬切。
-
transition必须写在基础选择器上，比如.btn、.btn-primary或自定义类.btn-scale - 别用
transition: all 0.2s——padding、border-color跟着动会抖，还可能覆盖 Bootstrap 默认的背景色过渡 - 正确写法示例：
.btn-scale {<br> transform: scale(1);<br> transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);<br>}<br>.btn-scale:hover {<br> transform: scale(1.04);<br>}
scale() 值设多少才不翻车
不是越大越好。缩放值直接影响布局稳定性、文字清晰度和跨浏览器渲染一致性。
- 推荐范围是
scale(1.02)到scale(1.05)，scale(1.03)是多数项目落地验证过的平衡点 - 超过
scale(1.05)容易撑破.btn-group或.col内部空间，相邻按钮被视觉挤压 - 非整数缩放（如
1.04）会触发亚像素渲染，Chrome/Firefox 下文字边缘轻微发虚——这不是 bug，但用户会觉得“糊” - 如果按钮已有其他
transform（比如rotate(2deg)），不能单独写scale(1.04)，得合并：transform: rotate(2deg) scale(1.04)
移动端点按卡住、没反馈？纯 CSS 不行
iOS Safari 和多数安卓浏览器不支持持续 :hover 状态。:hover 在触屏上仅在点击瞬间触发，松手后不会自动恢复，导致按钮“卡在放大态”。
- 补
:active规则做按下反馈：.btn-scale:active { transform: scale(0.95); }（注意是缩小，不是放大） - 更可靠的做法是 JS 监听：
touchstart加 class，touchend移除，再配 CSS：.btn-scale.touched { transform: scale(1.04); } - 别同时写
:hover和:active缩放，否则触屏用户点一下就卡住不动 - 加
touch-action: manipulation提升触摸响应优先级，减少 300ms 延迟
模糊、边框变粗、阴影拉伸？不是写错了，是缩放的副作用
transform: scale() 是等比缩放整个渲染层：字体、阴影、1px 边框全被拉伸。所谓“模糊”，是亚像素渲染机制；所谓“边框变粗”，是 1px 被拉成 1.04px 后插值得来的视觉结果。
- 加
backface-visibility: hidden强制启用合成层，改善文本渲染清晰度 - 边框问题更推荐放弃
border，改用outline+outline-offset模拟，它不受transform影响 - 阴影失真？把
box-shadow换成filter: drop-shadow()，后者是滤镜级，不随缩放拉伸（注意 Safari ≤15.6 兼容性） - Bootstrap 的
.btn类权重高，自定义样式要复刻完整类名，比如.btn.btn-primary.btn-scale:hover，否则根本不会生效
真正容易被忽略的是缩放对文档流的影响：放大后的按钮可能压到相邻元素，这不是动画写得不对，而是父容器没预留空间或没设 overflow: hidden —— 这类问题不真机测，光看桌面预览根本发现不了。
