按钮点击缩放动画需在默认状态声明transition: transform .15s ease，配合:active中transform: scale(0.95)，并确保初始transform: scale(1)、display为block/inline-block、无overflow:hidden遮挡，移动端建议加touch-action: manipulation。
按钮点击时用 transform: scale() 触发动画，必须配 transition
只写 transform: scale(0.95) 不会动，它只是个静态样式。动画生效的前提是：元素在「状态变化前后」存在可过渡的属性差，且该属性被 transition 显式声明。点击触发的缩放，本质是 :active 伪类切换导致的 transform 值变化，所以 transition 必须写在默认状态（非 :active）上，且指定作用属性为 transform。
-
transition不能只写transition: all .2s—— 浏览器可能过渡其他无关属性（如 color），影响性能或行为 - 推荐写法：
transition: transform .2s ease，明确、轻量、可控 - 如果按钮本身有
transform初始值（比如transform: rotate(0.01deg)），:active里的scale()会叠加，容易出意料结果；建议初始transform: none或仅用scale(1)
:active 中写 transform: scale() 的常见失效原因
点下去没反应？大概率是这几个问题：
- 父容器或按钮自身设置了
overflow: hidden，而scale超出边界被裁剪 —— 尝试临时加overflow: visible排查 - 按钮是
inline元素（如默认），transform对 inline 元素支持不一致；确保它是display: inline-block或block - 移动端点击有 300ms 延迟，
:active状态极短，肉眼难察觉；可加touch-action: manipulation缩短响应，并配合transition-timing-function: ease-out让回弹更明显 - CSS 优先级冲突：比如某处写了
button { transform: scale(1) !important; }，会覆盖:active里的设置
真实可用的最小可运行示例
button {
padding: 10px 20px;
border: none;
background: #007bff;
color: white;
border-radius: 4px;
display: inline-block;
transform: scale(1);
transition: transform 0.15s ease;
}
button:active {
transform: scale(0.95);
}
这段代码在 Chrome/Firefox/Safari（含 iOS）均有效。注意两点：一是 transform: scale(1) 显式声明初始值（避免某些旧版 Safari 对空 transform 解析异常）；二是时间设为 0.15s 而非 0.2s 或更长 —— 点击反馈需要快，超过 0.2s 就显得“卡”。
想让缩放更自然？别只靠 scale()
单纯 scale(0.95) 容易显得生硬。实际项目中常配合以下调整：
立即学习“前端免费学习笔记（深入）”；
- 加轻微位移：
transform: scale(0.98) translateY(1px)，模拟按压感 - 用
cubic-bezier(.25,.46,.45,.94)替代ease，让回弹更有弹性（类似 Material Design 的 “decelerate”） - 禁用高亮（尤其移动端）：
-webkit-tap-highlight-color: transparent;，避免点击时闪蓝框干扰动画 - 如果按钮带图标，确保图标字体或 SVG 也随缩放一起变化 —— 不要单独给图标设
font-size，而是依赖父级transform的继承效果
缩放动画看着简单，但 transform 的渲染层、:active 的触发时机、移动端 touch 响应链，三者稍有错位就会“动不了”或“动得怪”。调试时优先检查 computed styles 里 transform 值是否真在变，比猜更直接。
