按钮点击无动画响应，需检查 pointer-events、disabled、父元素遮挡及 :active 权重；缩放卡顿因缺少 transition，应设于常态规则中；兼容 IE9/10 需 JS 模拟；布局抖动可调 transform-origin、用 padding 替代 height。
按钮按下时没反应？检查是否被 pointer-events 或 disabled 阻断
很多情况下写好了 :active 样式，但点击按钮毫无动画——大概率是按钮本身不可交互。常见干扰因素有：pointer-events: none、disabled 属性、父元素遮挡（如透明 overlay）、或 CSS 中 :active 选择器权重不足被覆盖。
- 用浏览器开发者工具检查按钮的 computed styles，确认
pointer-events是auto，且没有disabled -
:active必须写在:hover之后才可能生效（否则会被覆盖） - 移动端需注意：部分安卓 WebView 对
:active响应延迟或不触发，可加touchstart事件临时补救
transform: scale() 缩小动画为何卡顿或跳变？
直接写 transform: scale(0.95) 在 :active 里，常出现“闪一下就缩”或“松开后回弹生硬”，根本原因是缺少过渡控制。CSS 动画依赖 transition 显式声明，而 :active 本身不带缓动逻辑。
- 必须给按钮设置
transition: transform 0.1s ease（推荐ease或ease-out，避免linear显得机械） - 不要只对
:active加transition，它只作用于“进入 active 状态”，松开时无过渡；要写在常态规则里 - 慎用
scale(0.8)之类过小值——文字会糊，按钮可能被压出父容器边界，建议控制在0.92–0.97区间
需要兼容老浏览器？别只靠 :active
IE10 及更早版本不支持 :active 在非 <a></a> 元素上生效（比如 <button></button> 或 <div role="button">）。纯 CSS 方案在此类环境会彻底失效。<ul>
<li>如果必须支持 IE9/10，改用 JS 监听 <code>mousedown / mouseup，动态增删 class（如 is-pressed）
will-change: transform 提前提示浏览器优化渲染，但仅在动画频繁时加，避免过度触发合成层transform 的 backface-visibility 处理异常，可加 backface-visibility: hidden 防闪烁按钮带文字或图标时，缩小导致布局抖动怎么办？
单纯 scale() 会缩放整个盒模型，包括文字和子元素。若按钮内有图标+文字组合，或设置了固定 height/line-height，缩小后可能出现文字错位、图标偏移、甚至换行。
- 优先对按钮自身设
transform-origin: center（默认就是，但显式写更稳） - 避免在按钮内部元素上再设
transform，否则叠加缩放易失控 - 如果按钮高度靠内容撑开，缩小后
line-height不变会导致文字“上浮”，可改用padding控制尺寸，让scale()只影响视觉，不影响流式布局 - 极端情况可考虑用
transform: scale(0.95) translateZ(0)强制 GPU 加速，减少重排
实际最常被忽略的是：动画时长太短（200ms）又像卡住。0.12s 是多数场景下的甜点值。另外，别忘了测试手指按压面积——真机上拇指按下去，触点区域比鼠标大得多，动画响应要足够及时，否则用户会觉得“按钮不跟手”。
