心跳动画需三段式关键帧（收缩→舒张峰值→回稳）配合cubic-bezier(0.42,0,0.58,1)节奏，设transform-origin:center并仅用transform/opacity避免重排，辅以brightness微调增强真实感。
心跳动画的核心是 scale 变化节奏，不是匀速缩放
直接用 transform: scale(0.9) 到 scale(1.1) 线性过渡，看起来像弹跳，不像心脏——真实收缩是快压、慢回、带轻微回弹。关键在 animation-timing-function：用 cubic-bezier(0.42, 0, 0.58, 1) 模拟“压得急、回得缓”的生理节奏，比 ease-in-out 更精准。
常见错误是只设两帧：@keyframes beat { 0% { scale(1); } 100% { scale(1.1); }——这漏掉了收缩（变小）阶段。心脏先收缩（scale(0.85)），再舒张超调（scale(1.1)），最后回落到常态（scale(1)）。
- 推荐三段式关键帧：0% → 收缩（
scale(0.85)）→ 舒张峰值（scale(1.1)）→ 回稳（scale(1)） - 总时长控制在 0.8s–1.2s，过长失真，过短像抽搐
- 避免同时加
rotate或skew，干扰收缩感；如需轻微晃动，用translateX(1px)配合主缩放即可
用 transform-origin 确保缩放中心在心脏几何中心
如果元素本身不是正圆，或用了 border-radius: 50% 但宽高不等，transform: scale() 会以左上角为原点缩放，导致“漂移”。必须显式设置 transform-origin: center。
更稳妥的做法是把心脏容器设为正方形，并居中内容：
立即学习“前端免费学习笔记（深入）”；
.heart {
width: 60px;
height: 60px;
transform-origin: center;
}
.heart::before,
.heart::after {
content: "";
position: absolute;
width: 30px;
height: 30px;
background: #e32727;
border-radius: 50%;
}
.heart::before {
top: 0;
left: 15px;
}
.heart::after {
top: 15px;
left: 0;
}
这样缩放时，两个圆形瓣膜才同步“搏动”，不会错位。
避免 layout thrashing：别在动画中触发重排
如果给 .heart 同时加 margin 或 top/left 动画，浏览器每帧都要计算布局，导致卡顿。所有动画属性必须限定在合成层：只用 transform 和 opacity。
- 绝对定位的
top/left改成transform: translate() - 不要用
width/height动画控制大小，一律走scale() - 心跳动画开启硬件加速：
transform: scale(1) translateZ(0)（末尾translateZ(0)强制创建合成层）
兼容性与性能微调要点
旧版 Safari 对 cubic-bezier() 解析有偏差，建议补全 -webkit-animation-timing-function；iOS 15 以下对 transform-origin: center 在伪元素上支持不稳定，可改用 50% 50%。
心跳动画常用于加载态或状态提示，别让它持续运行——用 animation-iteration-count: infinite 时，记得提供关闭机制（比如状态就绪后 animation-play-state: paused）。
最易被忽略的是颜色呼吸感：纯红色缩放会显得生硬，建议搭配 filter: brightness(1.05) 在舒张峰值时轻微提亮，模拟血流充盈的视觉反馈。
