按钮点击反馈应优先保证即时感，将transform过渡设为0.08s并用快进缓出贝塞尔曲线，background-color过渡缩至0.06s或直接切换，禁用不必要的will-change和transition:all，避免交互延迟。
过渡时间太长导致按钮点击无响应感
用户点下按钮后要等 300ms 才看到反馈，中间这段“空白期”会被感知为卡顿或失灵。根本原因不是动画本身，而是 transition 覆盖了元素的交互状态变化节奏，尤其是 :active 或 JavaScript 的 click 事件触发时机被视觉延迟掩盖。
- 默认
transition: all 0.3s ease会让所有属性（包括background-color、transform、opacity）都拖着走，但点击反馈只需要关键属性快速响应 - 把过渡时间砍到
0.1s以下（如0.08s）基本能匹配人眼对“即时反馈”的阈值 - 避免对
box-shadow或filter做长时过渡——它们重绘开销大，且延迟更明显
只给必要属性加过渡，其他立刻生效
很多 CSS 框架或手写样式习惯写 transition: all .2s，这会让 :hover 和 :active 的切换全被拉长。实际只需过渡视觉变化最明显的那 1–2 个属性，其余保持瞬时切换。
- 按钮点击反馈优先过渡
transform（如scale(0.95)），它硬件加速、性能好、延迟低 - 用
transition: transform 0.08s cubic-bezier(0.25, 0.46, 0.45, 0.94)替代ease，前段更快，点击后几乎无等待感 - 颜色变化（
background-color、color）可设为0.06s，甚至去掉过渡直接切换——人眼对颜色突变不敏感，但对位移延迟极其敏感
JavaScript 点击事件被 transition 阻塞？检查是否误用了 will-change
如果点击后绑定的 JS 逻辑（比如弹窗、表单提交）有明显延迟，不是 transition 本身阻塞 JS，而是 will-change: transform 等声明可能触发强制图层提升，在某些浏览器（尤其是旧版 Safari）中引发合成层重建抖动，间接拖慢事件响应。
- 删掉不必要的
will-change，它不是性能万能药，反而常是问题源头 - 用
pointer-events: none在过渡开始时临时禁用点击（仅限需防连点场景），过渡结束再恢复，比靠 JS 节流更轻量 - 确认没在
transitionend里做重操作——这个事件可能在动画最后一帧才触发，而用户早就在 50ms 内松开了手指
button {
transition: transform 0.08s cubic-bezier(0.25, 0.46, 0.45, 0.94),
background-color 0.06s;
}
button:active {
transform: scale(0.96);
background-color: #2c3e50;
}
过渡动画真正难调的不是时间数字，而是得分辨哪些变化必须快、哪些可以慢、哪些干脆不该动。一个按钮按下去，人脑预期的是「接触即反馈」，不是「接触→等待→反馈」。 
