:active伪类无法实现弹性回弹，因其状态随松手立即消失；需用JS添加临时class或:focus:not(:active)配合贝塞尔曲线与精准延时来模拟真实按压反馈。
直接用 :active 伪类做弹性反馈是行不通的——松手瞬间状态就没了，动画根本跑不完。真要“按下去→弹回来”这个节奏，必须绕开 :active 的生命周期限制。
为什么 :active 无法实现真正的弹性回弹
浏览器只在鼠标/手指按下期间维持 :active 状态，一松开立刻切回默认样式。哪怕你写了 transform: scale(0.9) transition: transform 300ms cubic-bezier(0.17, 0.67, 0.83, 0.67)，松手时会强制跳回原状，看不到“过冲→回弹”过程。
- 典型现象：按钮点下去缩了，但松手时不弹，而是“啪”一下直接复位
- 根本原因：
:active不是“触发后执行一段动画”，而是“只要按下就保持该样式”，没有“松开后延续动画”的能力 - 兼容性陷阱：iOS Safari 默认不触发
:active（除非加cursor: pointer或空onclick），进一步放大问题
用 JS 控制临时 class 实现可靠弹性动画
最稳的方式是用 JavaScript 在点击时加一个类（比如 is-pressed），再用 setTimeout 移除它，让 CSS 动画有完整执行时间。
- HTML 中确保按钮可聚焦：
<button tabindex="0">提交</button> - CSS 只对
transform做过渡，避免transition: all导致颜色、边框也跟着抖动 - 贝塞尔曲线选
cubic-bezier(0.17, 0.67, 0.83, 0.67)：前半段快压、后半段先反向再拉回，模拟真实回弹 -
setTimeout延时要比transition-duration略长（比如动画设 300ms，延时写 320ms），防止移除 class 时动画被截断
示例代码：
立即学习“前端免费学习笔记（深入）”；
.btn {
transition: transform 300ms cubic-bezier(0.17, 0.67, 0.83, 0.67);
}
.btn.is-pressed {
transform: scale(0.94);
}
button.addEventListener('click', function() {
this.classList.add('is-pressed');
setTimeout(() => this.classList.remove('is-pressed'), 320);
});
用 :focus:not(:active) 替代 JS（仅限键盘或部分触控场景）
如果用户可能用 Tab 键操作，或者想尽量减少 JS，可以用这个纯 CSS 曲线救国方案：利用 :focus 延长状态周期，再用 :not(:active) 捕捉“刚松开”的短暂窗口。
- 必须加
tabindex="0"，否则:focus不生效 - 动画只在“获得焦点且未处于按下态”时触发，即松手后的那一帧，适合短反馈（
200ms内） - 移动端 Safari 对该组合支持不稳定，不能作为唯一方案
- 别和
:active共享同一套 transform 值，否则容易打架；建议:active做瞬时压感（scale(0.98)），:focus:not(:active)做回弹动画
关键细节：缩放值与动画时长怎么定
弹性不是越夸张越好。实际项目中，几个数字卡得准，反馈才自然：
-
scale(0.92) ~ scale(0.95)是安全下压范围，低于0.9容易显得按钮被“踩扁” - 动画总时长控制在
280ms ~ 320ms：短于250ms难感知，长于350ms显得迟滞 - 别忽略
transform-origin: center—— 缺失会导致缩放中心偏移，按钮像被扯着一角缩 - 如果按钮本身有
box-shadow，记得在is-pressed状态里同步调整（比如变浅或偏移），否则阴影会“悬空”不动，破坏按压感
真正难的不是写出动画，而是让缩放值、贝塞尔曲线、JS 移除时机这三者咬合严丝合缝——差 20ms 或 0.01 的 scale，用户就会觉得“不对劲”。
