真正q弹感需三段式缩放动画：0% scale(1)→60% scale(0.92)→85% scale(1.05)→100% scale(1)，配280ms cubic-bezier(0.28,0.84,0.42,1)缓动及transform-origin:center，禁用:active内写动画。
为什么直接用 transform: scale() 一次缩放没Q弹感
因为真正的“Q弹”不是简单放大再还原，而是带惯性回弹的多阶段过程：先快速压扁（scale(0.92)），再略超调放大（scale(1.05)），最后稳住回弹到原始尺寸（scale(1)）。单次 scale(0.95) → scale(1) 缺乏节奏和弹性张力，视觉上只是“卡顿”，不是“Q弹”。
关键在 timing function 和阶段划分 —— cubic-bezier(0.28, 0.84, 0.42, 1) 比 ease-out 更贴合手指按压释放的物理反馈。
- 必须用
@keyframes显式定义至少 3 个关键帧（0%、60%、100%），不能只靠:active里单条transform - 动画时长控制在
240ms–320ms最佳：短于 200ms 感觉太急，长于 400ms 显拖沓 - 别忘了加
transform-origin: center，否则按钮边缘会偏移，尤其圆角按钮容易“滑出”
如何写一个真正可用的 Q 弹 keyframes 动画
下面这段是经过真机测试的最小可行代码，兼容 Chrome/Firefox/Safari（含 iOS 16+）：
@keyframes qbounce {
0% {
transform: scale(1);
}
60% {
transform: scale(0.92);
}
85% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
.btn-q {
animation: qbounce 280ms cubic-bezier(0.28, 0.84, 0.42, 1);
transform-origin: center;
}
注意：60% 帧压得够低（0.92）才能模拟“按下去”的阻力感；85% 的超调（1.05）不能过高，否则像弹簧崩飞；结尾必须回到 100% 的 scale(1)，否则按钮会永久微变大。
- 不要把
animation写在:active伪类里 —— 那样松手就中断，动画不执行完 - 如果按钮本身有
transition（比如背景色渐变），要确保animation不被覆盖，可加!important或提高选择器权重 - 移动端需加
-webkit-animation前缀（Safari 旧版本仍需），但现代项目可依赖 Autoprefixer
点击后动画不触发？检查这三处硬性限制
CSS 动画在点击场景下静默失败，90% 出在这几个地方：
-
pointer-events: none或父级设置了该属性 —— 动画本身不触发，连:active都不会生效 - 按钮是
<button></button>但 type 为submit且表单提交未阻止，页面跳转导致动画被强制中止 - 用了
will-change: transform却没配transform: translateZ(0)或其他触发层叠上下文的属性，某些 Android WebView 下动画直接不渲染
最简排查法：临时给按钮加 outline: 2px solid red 和 background: #ff0，确认点击时样式是否响应。不响应就先查交互层，别一上来调 keyframes。
和 JS 手动触发动画比，纯 CSS 方案有什么代价
纯 @keyframes + animation 看似轻量，但有两个隐藏成本：
- 无法动态调整缩放比例或时长 —— 比如长按需延长压感时间，或根据按钮大小自动缩放系数，这时必须切 JS +
element.animate() - 动画结束后 DOM 状态不变，但若按钮带状态切换（如 loading 中禁用），需额外监听
animationend事件来同步逻辑，否则视觉和状态脱节 - 连续快速点击时，CSS 动画会排队执行（尤其 Safari），造成“卡顿堆叠”，而 JS 可用
cancelAnimationFrame或节流控制
所以，小图标按钮、静态操作按钮用纯 CSS 完全 OK；但带状态流转、高频交互或需响应式反馈的按钮，还是得让 JS 接管动画触发时机。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
