只写 :active { transform: scale(0.95); } 无效，必须在按钮默认样式中声明 transition: transform 0.1s ease;，否则无动画；ios safari 需加 cursor: pointer 或 touch-action: manipulation 才触发 :active。
直接给结论：只写 :active { transform: scale(0.95); } 是没用的，必须在按钮默认样式里提前声明 transition: transform 0.1s ease;，否则缩放就是“啪一下”弹回，不是动画。
为什么写了 :active 却没动画？
因为 :active 本身只是个状态快照，不带任何时间感。浏览器不会自动给它加过渡——得你手动告诉它“哪些属性要过渡、多久、怎么动”。
-
transition必须写在按钮常态规则里（比如button或.btn），不能只塞进:active里 - 别用
transition: all 0.1s;——它会让浏览器监听所有属性变化，可能拖慢响应，还容易让文字渲染发虚 - 推荐写死要过渡的属性：
transition: transform 0.1s ease;，干净、可控、性能好
iOS Safari 上 :active 完全不触发怎么办？
iOS Safari 默认对“看起来不可点”的元素禁用 :active，这不是 bug，是策略。得手动激活它：
- 加
cursor: pointer;（哪怕只是内联style="cursor: pointer"） - 或者补
touch-action: manipulation;，既能唤醒:active，又能消除 300ms 点击延迟 - 如果用
<div> 模拟按钮，务必加 <code>role="button" tabindex="0"，否则 VoiceOver 或部分系统根本不识别它是可点击的缩放后文字模糊、边缘抖动怎么修？
这不是代码错，是高 DPR 设备（iPhone、MacBook）上非整数缩放 + 渲染插值导致的视觉失真：
- 缩放值建议固定用
scale(0.95)：低于0.9容易触发 subpixel rendering 失效；高于0.98用户几乎感知不到反馈 - 显式声明
transform-origin: center;，避免默认原点差异造成“偏移抖动”，尤其按钮含图标或文字靠左时 - 别在
:active里改border-radius或font-size——缩放后圆角像素值不变，视觉上会显得更“尖” - 可加
will-change: transform;提前提示合成层，但别滥用，会增加内存开销
真正难的不是写出
scale(0.95)，而是让那个“按下瞬间”的视觉变化，在各种设备上都准时触发、缩放不抖、松手不粘滞——这些细节藏在cursor、role、touch-action和真机反复触摸测试里。 - 缩放值建议固定用
