心跳动画需按“快速收缩→短暂停顿→缓慢回弹”三阶段设计：0%→30%快速放大至scale(1.3)，30%→40%保持峰值制造顿挫，40%→100%用cubic-bezier(0.25,0.46,0.45,0.94)缓落回scale(1)，周期0.9s，须配硬件加速与双前缀兼容。
用 @keyframes 模拟心跳的缩放节奏
心跳效果本质是「先快速收缩 → 短暂停顿 → 缓慢回弹」的非匀速缩放，不能只用 scale(1.2) 往返。关键在控制贝塞尔曲线和关键帧停留时间。
- 0% → 30%：快速放大到
scale(1.3)（模拟心肌收缩） - 30% → 40%：保持
scale(1.3)10% 动画时长（制造“顿挫感”，像心跳的“噗”声） - 40% → 100%：用
cubic-bezier(0.2, 0.8, 0.4, 1)缓慢回落到scale(1)（模拟舒张）
@keyframes heartbeat {
0% { transform: scale(1); }
30% { transform: scale(1.3); }
40% { transform: scale(1.3); }
100% { transform: scale(1); }
}
animation 属性必须配 ease-in-out 以外的缓动
默认 ease 或 ease-in-out 会让缩放太“顺滑”，失去心跳的机械感。必须手动指定贝塞尔曲线或使用 steps() 控制中间帧。
- 推荐用
cubic-bezier(0.25, 0.46, 0.45, 0.94)—— 前段陡、中段平、后段缓，贴合生理节奏 - 避免写
animation: heartbeat 1s infinite这种裸写，漏掉animation-timing-function会退回到默认ease - 心跳周期建议设为
0.8s–1.2s，过快像抽搐，过慢失去节奏感
.heart {
animation: heartbeat 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}
真实项目里要防「动画叠加导致抖动」
如果元素本身有其他 transform（比如旋转、位移），直接叠 scale 会触发矩阵合并，造成视觉抖动或模糊。必须用 transform: translateZ(0) 强制硬件加速，且所有变换写在同一行。
- 错误写法：
transform: rotate(10deg); transform: scale(1.2);（后者覆盖前者） - 正确写法：
transform: rotate(10deg) scale(1.2); - 加
will-change: transform可提前提示浏览器优化，但别滥用，仅对频繁动画的元素加
.heart {
transform: rotate(-5deg) scale(1);
will-change: transform;
animation: heartbeat 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}
移动端 Safari 的 @keyframes 兼容细节
Safari 15.4 之前不支持 @keyframes 中带空格的属性值（如 scale(1.3)），需补全 -webkit- 前缀，且关键帧必须写全。
立即学习“前端免费学习笔记（深入）”；
- 必须同时写
@-webkit-keyframes和@keyframes - 不能省略 100% 帧，Safari 旧版会忽略不完整定义
- 若用 PostCSS 自动加前缀，确认插件版本 ≥ 8.4，否则可能漏掉
-webkit-transform
@-webkit-keyframes heartbeat {
0% { -webkit-transform: scale(1); transform: scale(1); }
30% { -webkit-transform: scale(1.3); transform: scale(1.3); }
40% { -webkit-transform: scale(1.3); transform: scale(1.3); }
100% { -webkit-transform: scale(1); transform: scale(1); }
}
心跳最难调的其实是「停顿那 10%」——少一点就变呼吸，多一点就变卡顿。实际调试时把 animation-duration 改成 5s，肉眼一帧帧看停顿位置是否落在收缩峰值上，比凭感觉调更稳。 
