button点击回弹动效需用cubic-bezier而非ease-in-out，因其可自定义“过冲+回弹”节奏；应仅对transform过渡、用js或:focus控制状态周期，并注意移动端兼容性与缩放模糊等问题。
button点击动效为什么用cubic-bezier而不是ease-in-out
因为ease-in-out的加减速太“规矩”，回弹需要先压后弹——也就是在动画快结束时反向偏移再回正，这得靠自定义贝塞尔曲线控制关键帧节奏。默认缓动函数做不到“过冲+回弹”这个动作。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
cubic-bezier(0.17, 0.67, 0.83, 0.67)是常用回弹基线：前半段加速快，后半段先减速到负位移（视觉上“压下去”），再拉回原位 - 别用
transition: all 0.3s cubic-bezier(...)——会把所有属性（比如color、border）都套上回弹节奏，导致意外抖动 - 只对
transform做过渡：按钮按下的本质是位移/缩放变化，其他样式应保持瞬时切换
如何让:active状态触发真实回弹，而不是“按住就弹”
浏览器原生:active只在鼠标按下期间生效，松开就立刻切回默认态，根本来不及跑完一个带回弹的transform动画。必须用:focus或JS控制类名来延长可动画时段。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
button加tabindex="0"，确保能获得焦点；配合:focus:not(:active)捕获“刚松开”的瞬间 - 更可靠的做法是用JS监听
click，添加临时类is-pressed，并在setTimeout里移除——延时要略长于transition-duration（比如320ms设为350ms） - CSS里写
.btn.is-pressed { transform: scale(0.95); }，过渡只作用于transform和cubic-bezier
transform: scale()回弹 vs transform: translateY()回弹的区别
两者都能做出“按下→回弹”效果，但视觉反馈逻辑不同：scale模拟物理按压的形变感，translateY更像按钮被“戳下去又弹起来”。选哪个取决于UI语义，不是技术限制。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
scale要注意文字模糊风险：Chrome在非整数缩放时可能触发亚像素渲染，加transform: translateZ(0)或will-change: transform可缓解 -
translateY需预留足够父容器高度，否则下压时内容溢出或触发滚动条——尤其在flex布局中容易被忽略 - 避免混用：不要同时写
transform: scale(0.95) translateY(-2px)，多维变换会让cubic-bezier节奏难以调试
移动端点击回弹动效失效的常见原因
iOS Safari和部分安卓WebView对:active支持极弱，默认只有约300ms激活窗口，且不触发CSS过渡。纯CSS方案在移动端基本不可靠。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须加
touch-action: manipulation到按钮上，告诉浏览器“这是可点击控件”，缩短延迟并启用:active - 更稳妥的是监听
touchstart/touchend，用classList.add/remove控制状态类——注意防重复触发（preventDefault慎用，可能影响滚动） - 别依赖
hover做回弹：移动端没有悬停概念，hover伪类在iOS上仅对<a></a>标签有效
cubic-bezier再漂亮也卡在半路。 
