应显式设置transform-origin: center、添加will-change: transform，并用@keyframes ui-pulse配合cubic-bezier(0.25,0.46,0.45,0.94)实现快进慢出呼吸感动画，绑定时通过class+animationend防重复播放。
点击时缩放动画卡顿或闪一下怎么办
直接用 @keyframes 做 scale 动画，但点下去瞬间有跳变或回弹不自然——大概率是没设好 transform-origin 或漏了 will-change。浏览器默认从元素中心缩放，如果按钮内容靠左、带图标、或父容器有 overflow: hidden，缩放就会“切掉边缘”或触发重排。
- 始终显式设置
transform-origin: center（哪怕默认就是它，也写上） - 给触发元素加
will-change: transform，提前告诉浏览器这个属性会变，避免合成层重建 - 避免在
:active里直接写transform: scale(0.95)—— 这种硬切没有过渡，呼吸感就断了；必须配合transition或用@keyframes控制全过程
用 @keyframes 实现呼吸感的关键帧节奏
“呼吸感”不是匀速缩放，是快进慢出 + 轻微过冲再回弹。人眼对 200–300ms 内的非线性变化最敏感，太短像抖动，太长像卡顿。
- 推荐时间轴：
0% { scale(1) }→50% { scale(0.92) }→75% { scale(0.96) }→100% { scale(1) } - 动画函数必须用
cubic-bezier(0.25, 0.46, 0.45, 0.94)（类似ease-out但更柔和），别用ease-in-out—— 它两端太“硬”，破坏呼吸节奏 - 动画名别叫
click-scale，改用语义化名称如ui-pulse，方便后续复用到加载态、悬停等场景
```css
@keyframes ui-pulse {
0% { transform: scale(1); }
50% { transform: scale(0.92); }
75% { transform: scale(0.96); }
100% { transform: scale(1); }
}
```
怎么绑定到点击事件而不触发多次播放
CSS 动画本身不会防重复触发，用户快速连点就会堆叠播放、卡住或乱序。不能依赖 JS 的 disabled 或节流——按钮状态可能需保持可交互，比如提交中要禁用，但图标按钮只是反馈。
- 用
animation-play-state: paused初始挂起动画，点击时用 JS 切成running并立刻重置：el.style.animation = 'none'; el.offsetHeight; el.style.animation = 'ui-pulse 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94)' - 更稳妥的做法是加一个 class 触发动画，然后用
animationend事件移除它，确保每次只播一次 - 别在
:active伪类里调用@keyframes—— 它只响应鼠标按下瞬间，松开就停，根本播不完
移动端点击区域小、缩放后文字糊怎么办
缩放动画在 iOS Safari 上容易让字体渲染发虚，尤其 scale 时，系统会降采样抗锯齿；安卓部分 WebView 对 <code>transform 的 subpixel 处理也不一致。
- 给按钮加
-webkit-font-smoothing: antialiased，强制启用次像素渲染 - 避免对
<input type="button">直接加动画 —— 它的默认样式在各端差异大，优先套一层<div role="button"> 再动效<li>缩放值别低于 <code>0.88，否则小字号（12–14px）在 2x 屏上会明显失真；测试时务必真机连点 5 次以上看是否糊
动画真正难的不是写出来，是让每一次点击都落在人眼觉得“刚好”的节奏里——差 30ms 就像呼吸憋了一下，缩放值差 0.02 就像气没呼尽。这些数值得在真实设备上点到手指发酸才能调准。
