按钮 hover 缩放卡顿或无动画，需同时设置 transform: scale() 和 transition: transform；transition 必须写在默认状态，避免用 all；优先用 transform 而非 width/height 以提升性能。
按钮 hover 缩放卡顿或没动画？检查是否用了 transform + transition
直接改 width/height 或 scale() 但没配 transition，缩放会瞬间跳变。必须同时设置两个属性：用 transform: scale() 控制缩放，再用 transition 声明对 transform 的过渡行为。
-
transition必须写在默认状态（非:hover）里，否则首次 hover 不触发动画 - 只写
transition: all 0.2s容易引发意外重绘，建议精确到transform - 缩放值推荐用
scale(1.05)这类小幅度值，避免视觉突兀
为什么用 transform 而不是 width/height？
改 width/height 会触发浏览器 Layout（布局重排），性能差；transform 属于合成层操作，由 GPU 加速，帧率更稳。尤其在低配设备或密集交互场景下，差异明显。
- 缩放、位移、旋转都该优先走
transform - 别在
transition中混用transform和opacity等不同性质属性，除非明确需要 - 如果按钮含文字，
scale()会等比缩放内容，注意字体可读性
ease-in-out 太生硬？换更自然的缓动函数
默认 ease 或 ease-in-out 对缩放来说启动和结束仍偏快。用 cubic-bezier() 微调更可控：
button {
transform: scale(1);
transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
button:hover {
transform: scale(1.08);
}
- 这组贝塞尔值（
0.25, 0.46, 0.45, 0.94）是较常用的“缓入缓出”变体，比原生ease-in-out更柔和 - 想更轻快可用
cubic-bezier(0.34, 1.56, 0.64, 1)（轻微过冲感） - 避免用
linear，匀速缩放缺乏真实感
移动端点击无反馈？补上 touch-action 和主动态
iOS Safari 和部分安卓浏览器在 :hover 上行为不一致，纯 :hover 缩放在触摸设备可能失效。需加一层主动触发逻辑：
立即学习“前端免费学习笔记（深入）”；
- 给按钮加
touch-action: manipulation，提升触摸响应优先级 - 用
:active补缩放，确保点按有即时反馈：button:active { transform: scale(0.95); } - 若用 JS 绑定点击，记得在
click后手动还原transform，否则可能卡在缩放态
scale()、什么时候该用 scale3d()（避免模糊）、以及在 flex/grid 布局中缩放是否影响父容器尺寸——这些细节不测真机容易漏。 
