按钮点击弹性拉伸动画需用cubic-bezier(0.68, -0.55, 0.27, 1.55)模拟物理回弹：负y₁触发反向压扁，y₂＞1造成过冲拉伸，再回落；须配合transform: scale()与will-change: transform防掉帧，且避免仅依赖短暂生效的:active伪类。
按钮点击时如何触发弹性拉伸动画
直接用 transform: scale() 配合 transition 做点击缩放，视觉上像“按下去弹回来”，但默认是匀速，缺乏弹性感。真要模拟物理回弹，得用 animation + @keyframes 或 CSS 缓动函数。
关键不是“能不能动”，而是“动得像不像真实物体”。浏览器原生的 cubic-bezier(0.68, -0.55, 0.27, 1.55) 就能模拟弹簧回弹效果——负的 y 值允许动画先反向（压扁），再冲过头（拉伸），最后稳住。
- 别只写
transition: transform 0.3s ease，它太“软”，没张力 - 用
transform: scale(0.95)触发点击态，配合transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55) - 如果想更可控（比如拉伸方向、幅度），改用
@keyframes定义：从scale(1)→scale(0.92)（压）→scale(1.03)（弹过头）→scale(1) - 务必加
will-change: transform或transform: translateZ(0)，避免部分安卓 WebView 动画掉帧
为什么 :active 状态下动画经常失效或卡顿
因为 :active 是伪类，只在鼠标按下/触摸期间生效，时间极短（通常
真实可用的方案是换思路：不靠伪类维持状态，而是用 JavaScript 控制 class 切换，或用 animation-fill-mode: forwards 锁定最终帧。
立即学习“前端免费学习笔记（深入）”；
- 给按钮绑定
mousedown/touchstart，添加is-pressed类；松开时移除 —— 这样动画能完整执行 - 若坚持纯 CSS，可把动画设为
animation: press-bounce 0.3s forwards，并在:active中触发，但需注意 Safari 对forwards的兼容性问题 - 移动端要额外处理
touch-action: manipulation，否则 iOS 可能延迟触发:active
transform 拉伸和 width/height 动画哪个更安全
绝对选 transform。改 width 或 height 会触发 layout（重排），尤其在按钮内有文字或图标时，容易造成抖动、文字重绘模糊，低端机明显卡顿。
transform 只影响合成层，走 GPU 加速，且不破坏文档流。哪怕拉伸到 scale(1.2)，按钮实际尺寸没变，周边元素不会位移。
- 避免同时 animating
width和transform，会导致图层合并失败，反而降级为 CPU 渲染 - 如果按钮背景用了
border-radius，拉伸后圆角会随比例变化，看起来更“饱满”——这是优点，不是 bug - 慎用
scaleX单独拉伸，文字会被横向压扁；优先用scale()统一缩放
移动端触摸反馈的隐藏陷阱
安卓 Chrome 和 iOS Safari 对 :active 的激活逻辑不同：iOS 默认禁用 :active 样式，除非设置了 cursor: pointer 或监听了 touch 事件；安卓则可能因快速连点导致多次触发动画叠加。
最稳妥的做法是统一用 JS 控制状态，而不是赌伪类行为。
- 给按钮加
ontouchstart="this.classList.add('is-pressed')"和ontouchend="this.classList.remove('is-pressed')" - 同时保留
onmousedown/onmouseup适配鼠标，避免桌面端失效 - 加
user-select: none防止长按唤出菜单干扰动画 - 动画时长控制在 200–300ms 内，超过 350ms 用户会觉得“迟钝”
