必须配transition才有平滑缩放效果，因transform: scale()本身仅触发瞬间变形；transition须写在默认状态（如.btn），若只写在:hover中会导致首次悬停跳变，且禁用all过渡、控制缩放幅度（1.04～1.08）、兼顾:active与移动端touch-action方可保障跨端一致反馈。
直接加 transform: scale() 不会动，必须配 transition 才有平滑效果；而且 transition 一定得写在默认状态（非 :hover），否则第一次悬停会跳变。
为什么只写 scale() 没动画？
浏览器不会自动给 transform 加过渡，它只是个“瞬间变形”指令。缩放卡顿、突兀跳变、hover 无反应，90% 是因为漏了 transition 声明，或者写错了位置。
-
transition必须写在按钮的基础类里（比如.btn或自定义类），不能只写在:hover中 - 别用
transition: all 0.2s—— 它会让所有可变属性一起动，可能意外触发重排或模糊 - 只过渡
transform：例如transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) - 缩放值建议控制在
scale(1.04)～scale(1.08)，超过1.1容易视觉失衡
Bootstrap 按钮的 :hover 样式被覆盖怎么办？
Bootstrap 默认的 .btn-primary:hover 权重很高，你单独写 .my-btn:hover 很可能不生效。
- 复刻它的选择器结构：
.btn.btn-primary.scale-hover:hover，确保权重足够 - 不要用
!important，后续改起来麻烦 - 如果用 Sass，优先改
$enable-transitions: true和$btn-transition变量，更干净 - 检查是否全局禁用了 transition：
* { transition: none !important }这类重置会直接废掉所有动画
移动端点击没反馈？补 :active 和 touch-action
iOS Safari 和部分安卓浏览器对 :hover 支持弱，纯 hover 缩放在触摸设备上基本无效。
- 加
touch-action: manipulation提升触摸响应优先级 - 必须写
:active规则，例如.btn:active { transform: scale(0.95); } - 注意
:hover:active的叠加行为：如果同时存在，:active会覆盖:hover，想保留抬升+下压连贯感，得手动协调，比如.btn:hover:active { transform: scale(0.98); } - 避免在 JS 点击事件里直接操作
style.transform，否则容易卡在缩放态出不来
真正容易被忽略的是缩放对布局的影响：Bootstrap 卡片或按钮放大后可能压到相邻元素，这不是动画问题，而是文档流没预留空间——得靠 overflow: hidden、transform-origin 或父容器 padding 补偿，不真机测很难发现。
