hover放大无动画因未加transition或位置错误；需在常态样式写全transition: transform 0.2s ease；亚像素模糊可加will-change: transform；移动端需JS或:active替代:hover；scale不占位应配transform-origin且避免影响布局。
hover放大按钮时没动画，只跳变
根本原因是没加 transition，或者写在了错误的元素上。浏览器默认不缓动任何 transform 变化，必须显式声明过渡属性和时长。
-
transition必须写在按钮的常态样式里（不是:hover块里） - 推荐写全：
transition: transform 0.2s ease;，只写transition: 0.2s;在部分老浏览器中可能失效 - 避免用
all：transition: all 0.2s;会把颜色、边框等所有变化都拖慢，影响交互反馈
放大后按钮内容模糊或抖动
这是 transform: scale() 在非整数像素下渲染导致的亚像素问题，尤其在 Chrome 和 Safari 中常见。
- 加
will-change: transform;到按钮常态样式，提前启用 GPU 加速（但别滥用，每个元素都加会吃内存） - 确保父容器没有
overflow: hidden且缩放后不被裁切——放大 1.2 倍时，宽高各多出 10%，留足余量 - 如果文字模糊，试试加
-webkit-font-smoothing: subpixel-antialiased;（仅限 macOS）
移动端 hover 不触发，手指点不放大的问题
手机浏览器没有真正意义上的 :hover，触摸设备通常只在点击后短暂模拟一次，无法持续响应悬停。
- 纯 CSS 方案无解，必须加 JS 检测触摸事件：
touchstart时加类名，touchend时移除 - 更稳妥的做法是改用
:active：button:active { transform: scale(0.95); }（按下去缩小），再配合transition实现点击反馈 - 不要依赖
@media (hover: hover)做条件判断——它在 iOS Safari 中支持不稳定，且不能解决真机“点一下就走”的问题
scale 放大导致布局位移或兄弟元素重排
transform: scale() 不影响文档流，但若按钮是 inline 或 inline-block，缩放后仍会撑开行高，间接影响周围元素位置。
立即学习“前端免费学习笔记（深入）”；
- 给按钮设
display: block;或display: inline-flex;，再配vertical-align: top;控制对齐 - 避免在 flex 容器里对子项用
scale后又依赖flex-grow——缩放会干扰尺寸计算，导致布局错乱 - 如果需要“视觉放大但不占位”，用
transform: scale(1.2);+transform-origin: center;，别碰width/height
真正难的不是写那两行 CSS，而是缩放后要不要重绘阴影、要不要同步调整 box-shadow 的偏移和模糊度，以及用户手指划过时，你希望它是立刻响应，还是带一点延迟来过滤误触——这些细节没人提，但上线后第一个被 QA 打回来。
