正确心跳动画需分收缩期（快缩至0.92）和舒张期（慢胀至1.08），配合cubic-bezier(0.2,0.8,0.4,1)缓动、三层颜色协同变化，并通过js点击重置动画、禁用空闲态播放以保障真实感与性能。
用 @keyframes 实现心跳式缩放动画，但别只缩放
纯 transform: scale() 模拟心跳会显得机械——真实心跳伴随胸腔微压、血流充盈感，视觉上需要「先压再胀」的非对称节奏。直接写 scale(0.95) → scale(1.05) 是错的，人眼能感知到匀速缩放缺乏生理张力。
正确做法是拆解两个阶段：收缩期（快而短）+ 舒张期（慢而饱满）。示例关键帧：
@keyframes heartbeat {
0% { transform: scale(1); }
25% { transform: scale(0.92); } /* 快速内收，持续时间短 */
60% { transform: scale(1.08); } /* 缓慢外扩，带弹性回弹 */
100% { transform: scale(1); }
}
注意：animation-timing-function 必须设为 cubic-bezier(0.2, 0.8, 0.4, 1) 模拟肌肉舒张的渐进感，不能用 ease-in-out。
呼吸感靠颜色与透明度协同变化，不是单纯变亮
真实呼吸时皮肤血氧波动导致局部泛红、微热感，不是整体亮度提升。只调 background-color 或 opacity 会像灯泡开关。
实操建议用三层叠加模拟：
- 底层：固有色按钮背景（如
#4a6fa5） - 中层：半透红色脉冲层（
box-shadow: inset 0 0 20px rgba(255, 80, 80, 0.3)），随心跳周期增强/减弱 - 顶层：轻微
filter: brightness(1.05) contrast(1.1)在舒张峰值时短暂启用（仅持续 120ms）
所有颜色变化必须和缩放动画严格同步，用同一 animation-name 和 animation-duration，否则会割裂成「按钮在跳，光在闪」两个独立动作。
交互响应要打断并重置动画，否则点击后还在跳
用户点击按钮时，若动画正在播放中段（比如刚缩到 0.92），直接触发状态切换会导致视觉卡顿或跳帧。浏览器不会自动中断 CSS 动画，需手动控制。
解决方式分两步：
- 给按钮加
animation-play-state: paused初始态，用 JS 监听click后立即执行element.style.animationPlayState = 'running' - 更可靠的做法：监听点击时移除当前动画类，强制重绘后再加回——
element.classList.remove('pulse'); void element.offsetWidth; element.classList.add('pulse');
⚠️ 容易踩坑：用 animation-fill-mode: forwards 会让动画结束后停留在最终态（如 scale(1)），下次触发时从 1 开始缩，失去「刚被按压」的瞬时反馈。应设为 none 并靠 JS 控制起始帧。
移动端真机测试常因 will-change 失效或发热
在 iOS Safari 或部分安卓 WebView 中，过度使用 will-change: transform 可能触发强制 GPU 渲染，导致动画卡顿甚至设备发热。这不是 bug，是浏览器把「心跳」当成了高频动画资源抢占。
优化策略：
- 仅在悬停（
:hover）或聚焦（:focus-within）时启用动画，空闲态停掉：.btn { animation: none; } .btn:hover { animation: heartbeat 1.8s infinite; } - 检测是否触屏设备，禁用自动播放：
@media (pointer: coarse) { .btn { animation: none; } } - 心跳周期别死守 1.2–1.5 秒——真实静息心率约 60–100bpm，对应动画周期 0.6–1.0 秒更可信，但低于 0.8 秒在低端机易掉帧，建议取 0.85s
最常被忽略的是：动画必须绑定到伪类或 class 切换，而非直接写在基础选择器里。否则 SSR 渲染时就启动，首屏加载未完成就跳，用户还没看清按钮就「病态狂跳」了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
