写了 transform: scale(0.95) 却没动画是因为 transform 本身不触发过渡，需配合 transition 属性写在默认状态（如 button { transition: transform 0.15s ease; }），且 :active 中仅定义缩放值；ios safari 需加 cursor: pointer 或 onclick="" 激活 :active；scale(0.95) 是兼顾清晰度与响应的平衡点，须配 transform-origin: center；卡顿或模糊可通过 will-change: transform、-webkit-font-smoothing 等优化。
为什么写了 transform: scale(0.95) 却没动画
因为 transform 本身不触发过渡，只写在 :active 里等于“瞬间缩放”，松手直接弹回。动画必须靠 transition 驱动，且它只能写在默认状态（比如 .btn 或 button），不能只塞进 :active 里。
-
button { transition: transform 0.15s ease; }✅ 必须加在这里 -
button:active { transform: scale(0.95); }✅ 这样才生效 - 别用
transition: all 0.15s—— 它监听所有属性，拖慢响应，还可能让文字渲染模糊 - 时间别超
0.2s，否则反馈拖沓；ease比linear更自然
iOS 上 :active 不触发怎么办
iOS Safari 默认不激活 :active，尤其对 div 或没交互暗示的元素。这不是你代码错，是浏览器策略——得手动“唤醒”它。
- 给按钮加
cursor: pointer（哪怕只是内联style="cursor: pointer"） - 或加空
onclick=""属性，现代 Safari 会因此启用:active - 更稳妥：补
touch-action: manipulation，既消除 300ms 延迟，又防止误触滚动 - 确保点击区域 ≥44×44px，靠
padding扩热区，别只靠scale拉视觉大小
缩放值选 scale(0.95) 还是 scale(0.98)
scale(0.95) 是平衡点，不是“更明显”，而是兼顾可读、可点、渲染稳定。
-
scale(0.98)变化太弱，高 DPI 屏上几乎感知不到点击响应 -
scale(0.9)或更低会让文字边缘模糊，iOS 还可能误判为长按，触发系统菜单 -
scale(0.95)在多数尺寸下仍保持清晰，不挤压相邻元素（transform不占布局空间） - 务必配
transform-origin: center，否则带padding的按钮缩放会偏移
移动端缩放卡顿、闪退、文字模糊怎么修
低端安卓机或旧 WebView 中，scale 动画容易掉帧、闪退或文字糊，问题不在写法，而在渲染层没提前准备。
- 加
will-change: transform（可选但推荐），提示浏览器该元素将频繁变换，提前升合成层 - 避免同时改
width/height或margin，这会强制重排，直接卡死 - 文字模糊时，加
-webkit-font-smoothing: subpixel-antialiased - 图标锯齿？试试
image-rendering: crisp-edges或-webkit-optimize-contrast - 父容器有
overflow: hidden？缩放时内容可能被裁，加transform-style: preserve-3d防截断
scale(0.95)，而是让 :active 在各种设备上都准时触发、缩放不抖、松手不粘滞——这些细节藏在 cursor、role、timing function 和父容器的 pointer-events 里。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
