自然的点击缩放应使用 transition 配合 :active 或 JS 切换 class，而非 @keyframes；关键在于 0.15s ease 的 transform 过渡、0.95 缩放比及避免 transition: all。
按钮点击后缩放不自然？关键在 transition 而不是 keyframes
直接用 @keyframes + animation 做点击缩放，通常会卡顿或无法重播——因为默认没清空动画状态，且缺少交互反馈的即时性。真正自然的点击缩放，应该用 transition 配合 :active 或 JS 切换 class，而非硬套 keyframes。
用 :active 实现轻量、可复用的点击缩放
适用于纯 CSS 场景，无需 JS，适合按钮按压反馈。注意：:active 只在鼠标按下/触摸期间生效，松开即恢复，天然符合“点击瞬间”的节奏。
-
transform: scale(0.95)比scale(0.8)更自然，过度压缩反而像卡顿 - 必须声明
transition: transform 0.15s ease，ease比linear更有弹性感 - 不要只写
transition: all，它会把所有属性都过渡，可能意外触发文字模糊或布局抖动 - 如果按钮有
border-radius，缩放时边缘可能轻微锯齿，可加will-change: transform提前提示渲染层（仅必要时）
button {
transform: scale(1);
transition: transform 0.15s ease;
}
button:active {
transform: scale(0.95);
}
需要多次触发或自定义时长？用 JS 切换 class + transition
当你要控制缩放时机（比如表单提交中禁用、API 返回后再缩放）、或需要不同状态（hover / focus / disabled）对应不同缩放值时，:active 就不够用了。这时用 JS 控制 class 最灵活。
- 给按钮加一个
is-pressed类，CSS 中定义该类的transform和transition - JS 用
element.classList.add('is-pressed')+setTimeout(() => ..., 150)模拟点击时长，避免一闪而过 - 别用
animation+animation-fill-mode: forwards，它容易和 transition 冲突，且难以手动中断 - 移动端需补
touchstart事件，否则 iOS Safari 点击无响应
button.is-pressed {
transform: scale(0.95);
transition: transform 0.15s ease;
}
为什么不用 @keyframes 做点击缩放？
除非你要做「点击→缩放→弹跳→停住」这类复杂序列动画，否则 @keyframes 是杀鸡用牛刀。它带来几个实际问题：
立即学习“前端免费学习笔记（深入）”；
- 每次点击都要调
element.animate()或重设animation名称，代码冗余 - 动画结束后 DOM 状态未变，下一次点击需先移除 animation，否则可能堆积或跳帧
- 无法响应用户提前松手（比如鼠标按下后拖出按钮区域），
:active和 class 方案天然支持 - 部分旧版 Android WebView 对
transform+keyframes的合成层处理不稳定，出现闪烁或缩放错位
120ms–180ms，缩放比例落在 0.92–0.97 区间，比任何 fancy keyframes 都管用。 
