按钮点击无动画响应，需检查 pointer-events、disabled、父元素遮挡及 :active 权重；缩放卡顿因缺少 transition，应设于常态规则中；兼容 IE9/10 需 JS 模拟；布局抖动可调 transform-origin、用 padding 替代 height。
按钮按下时没反应？检查是否被 pointer-events 或 disabled 阻断
很多情况下写好了
样式，但点击按钮毫无动画——大概率是按钮本身不可交互。常见干扰因素有：
、
属性、父元素遮挡（如透明 overlay）、或 CSS 中
选择器权重不足被覆盖。
用浏览器开发者工具检查按钮的 computed styles，确认
是
，且没有
必须写在
之后才可能生效（否则会被覆盖）
移动端需注意：部分安卓 WebView 对
响应延迟或不触发，可加
事件临时补救
transform: scale() 缩小动画为何卡顿或跳变？
直接写
在
里，常出现“闪一下就缩”或“松开后回弹生硬”，根本原因是缺少过渡控制。CSS 动画依赖
显式声明，而
本身不带缓动逻辑。
必须给按钮设置
（推荐
或
，避免
显得机械）
不要只对
加
，它只作用于“进入 active 状态”，松开时无过渡；要写在常态规则里
慎用
之类过小值——文字会糊，按钮可能被压出父容器边界，建议控制在
区间
需要兼容老浏览器？别只靠 :active
IE10 及更早版本不支持
在非
元素上生效（比如
或
:activepointer-events: nonedisabled:activepointer-eventsautodisabled:active:hover:activetouchstarttransform: scale(0.95):activetransition:activetransition: transform 0.1s easeeaseease-outlinear:activetransitionscale(0.8)0.92–0.97:active
）。纯 CSS 方案在此类环境会彻底失效。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
如果必须支持 IE9/10，改用 JS 监听
mousedown
/
mouseup
，动态增删 class（如
is-pressed
）
用
will-change: transform
提前提示浏览器优化渲染，但仅在动画频繁时加，避免过度触发合成层
注意 Safari 旧版对
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 是多数场景下的甜点值。另外，别忘了测试手指按压面积——真机上拇指按下去，触点区域比鼠标大得多，动画响应要足够及时，否则用户会觉得“按钮不跟手”。