点击按钮无缩放动画是因为未声明transition，需在默认状态添加transition: transform 0.15s ease；:active中仅写transform无效，且scale建议用0.95避免消失和可访问性问题。
点击按钮后用 transform 缩小，为什么没动画效果？
因为 transform 本身不触发动画，必须配合 transition 声明过渡行为。只写 transform: scale(0.95) 是静态变化，用户点下去会“啪”一下缩，没有缓动过程。
常见错误现象：:active 里写了 transform，但没加 transition；或者把 transition 写在 :active 伪类里（无效，必须写在常态选择器上）。
- 必须在按钮的默认状态（如
button或.btn）中声明transition: transform 0.15s ease - 缩放值建议用
scale(0.95)而非scale(0)——后者视觉上像消失，且可能影响可访问性或点击热区判断 - 如果按钮有边框或阴影，
transform不会影响布局流，但box-shadow的变化建议也纳入transition，否则会突兀
如何让缩小动画在松开鼠标后复原？
:active 伪类只在按下时生效，松开自动回退——这正是你想要的行为。关键在于别用 JavaScript 强制切换 class，否则容易卡在缩小态。
使用场景：纯 CSS 反馈最轻量，适合按钮、图标、卡片等需要即时视觉响应的元素；若需兼容旧版 Safari（transform 需要 -webkit-transform 前缀，但现代项目通常不用了。
立即学习“前端免费学习笔记（深入）”；
- 确保
:active规则写在常态规则之后（CSS 层叠顺序），否则可能被覆盖 - 移动端要注意
:active默认延迟约 300ms，可用touch-action: manipulation优化响应 - 不要给
:active单独加transition——它继承常态声明的过渡设置
缩小时内容文字模糊怎么办？
这是 transform: scale() 在部分浏览器（尤其是 Chrome 和旧 Edge）渲染 subpixel 时的已知问题，本质是 GPU 合成层对非整数缩放的采样偏差。
性能影响不大，但视觉上明显：文字边缘发虚、图标锯齿。不是 bug，是渲染策略导致的副作用。
- 临时缓解：加
transform: translateZ(0)或will-change: transform（慎用，可能引发重绘开销） - 更稳方案：改用
opacity配合轻微位移（如transform: translateY(1px)），避开缩放渲染路径 - 如果必须缩放，
scale(0.98)比scale(0.9)模糊感低很多，人眼更难察觉
要不要用 JavaScript 控制 active 状态？
绝大多数情况下不用。原生 :active 已足够可靠，且能正确响应键盘 Space / Enter 触发，无障碍友好。
容易踩的坑：手写 JS 监听 mousedown + mouseup，结果没处理 mouseleave 或 blur，导致按钮卡在“按下态”；或者在 touch 设备上漏掉 touchstart/touchend，反馈失效。
- 只有当你需要「长按触发」或「点击后保持缩放态几秒」时，才值得引入 JS
- 若真要用 JS，优先用
classList.toggle('is-pressed')，而非直接操作style.transform，便于 CSS 统一维护动画参数 - 注意 SSR 场景下服务端无
:active，但用户首次交互前也不需要反馈——这个时间差基本不可感知
