需声明 transition: transform 0.2s ease 才能触发缩放动画；:active 仅瞬态生效，无法保持缩放状态，持久化需 JS 切换 class；移动端需 cursor: pointer 或 touchstart 激活。
按钮点击时用 transform: scale() 实现缩放，但没反应？
直接写 transform: scale(0.95) 在 :active 里是无效的——因为缺了 transition 声明。CSS 不会自动给变换加过渡，必须显式告诉浏览器“哪些属性要过渡、多久、什么节奏”。
-
transform本身不是可过渡的“默认属性”，得单独列出来 - 只写
transition: all 0.2s理论上可行，但不推荐：可能意外触发其他属性动画，且兼容性略差 - 最佳写法是锁定属性：
transition: transform 0.2s ease
:active 中的 scale() 为什么点一下就弹回，没法保持？
:active 是伪类，只在鼠标按下/触摸期间生效，松开就立刻退出。它天生就是瞬态的，不能“保持缩放”。如果你想要按住不放时持续缩小、松开恢复，:active 完全够用；但若想模拟“按下态保留”（比如表单提交中禁用并缩放），就得换思路：
- 用 JS 切换一个自定义 class（如
.is-pressed），再配 CSS 规则 - 避免依赖
:active做状态持久化 - 注意移动端
:active默认不触发，需加touchstart或cursor: pointer激活
完整可用的按钮缩放代码示例
button {
padding: 10px 20px;
border: none;
background: #007bff;
color: white;
border-radius: 4px;
/* 关键：声明 transform 可过渡 */
transition: transform 0.15s ease;
}
<p>button:active {
/<em> 点击时缩小到 95% </em>/
transform: scale(0.95);
}</p><p>/<em> 可选：防止移动端点击无反馈 </em>/
button {
cursor: pointer;
}容易被忽略的兼容性与性能细节
transform 和 transition 在现代浏览器里没问题，但有两点常被漏掉：
- 旧版 Safari（-webkit-transform 和
-webkit-transition前缀，现在基本可不加，除非还要支持 iOS 13 - 不要对
width/height做过渡来模拟缩放——会触发重排（layout），而transform: scale()只走合成层，性能好得多 - 如果按钮内含文字，
scale()会连带缩放字体，若想保持文字大小不变，得额外用transform: scale() translateZ(0)或反向缩放文字（不推荐，复杂且易出错）
实际项目里最常踩的坑，是忘了加 transition 声明，或者误以为 :active 能维持状态。缩放本身很简单，关键在理解 CSS 伪类的生命周期和过渡机制的绑定逻辑。
立即学习“前端免费学习笔记（深入）”；
