按钮 hover 缩放没动画，一定是漏写了 transition 属性；必须在基础类中声明 transition: transform 0.2s ease-in-out，而非仅写在 :hover 中，否则会跳变且移动端无效。
按钮 hover 缩放没动画？一定是漏写了 transition
只加 transform: scale(1.04) 在 :hover 里，浏览器只会瞬间跳变，不会平滑缩放。动画必须靠 transition 触发，而且它得写在**常态规则**（非 hover）上。
-
transition必须写在按钮的基础类里，比如.btn或.btn-primary，不能只写在:hover中 - 推荐只过渡特定属性：
transition: transform 0.2s ease-in-out，避免用all引发意外重绘 - 如果按钮已有其他
transform（比如translateY(-1px)），直接写scale(1.04)会覆盖——得合并：例如transform: translateY(-1px) scale(1.04)
缩放后文字模糊、边缘发虚怎么办
Chrome/Firefox 在非整数缩放（如 scale(1.04)）下会触发亚像素渲染，导致字体边缘轻微虚化。这不是 bug，但影响观感。
- 别退回到
scale(1)或整数倍——那等于没动 - 微调
transform-origin，比如设成center或50% 50%，有时能缓解失真 - 对文字子元素加
backface-visibility: hidden，可强制启用 GPU 渲染层，改善清晰度 - 慎用
will-change: transform：虽能预提示浏览器，但在 iOS Safari 上可能引发闪烁或滚动卡顿
Bootstrap 默认 hover 样式把你的缩放覆盖了
Bootstrap 的 .btn-primary:hover 选择器权重很高（.btn.btn-primary:hover），如果你只写 .my-btn:hover，样式根本不会生效。
- 要么提升选择器权重：用
.btn.btn-primary.my-scale:hover - 要么在 Sass 项目中复写变量，或在自定义 CSS 文件末尾加载，确保优先级更高
- 别用
!important—— 后续维护时容易和暗色模式、响应式断点冲突 - 注意：移动端 Safari 不触发
:hover，纯 CSS 方案在触摸设备上无效；如需反馈，得配合@media (hover: hover)条件启用
想让点击（:active）和悬停衔接自然
鼠标按下瞬间，:hover 和 :active 同时存在，但 Bootstrap 默认的 :active 常重置 transform，导致“抬升→突然归位”，失去按压反馈。
- 显式协调两个状态：
.btn:hover { transform: translateY(-2px) scale(1.03); }，再写.btn:hover:active { transform: translateY(0) scale(1); } - 避免用
margin-top或top实现位移——它们触发重排；坚持用transform - 多个属性过渡时间不一致时（比如位移想快、缩放想慢），必须分开声明：
transition: transform 0.15s ease, background-color 0.25s ease;
:hover 这一事实。很多项目上线后才发现 iPhone 上按钮“没反应”，其实只是 CSS 没做降级处理。
