心跳动画需用非对称cubic-bezier(0.2,0.8,0.4,1)实现快缩慢舒，配合30%快速放大、60%微过冲、100%回弹，时长0.8s～1.2s，显式设transform-origin:center center并确保元素居中定位。
心跳动画的核心是 scale 变化节奏，不是匀速缩放
直接用 @keyframes 写 scale(1) → scale(1.2) → scale(1) 会显得机械，不像真实心跳。真实心跳收缩快、舒张慢，所以关键帧时间点和缓动函数必须不对称。
推荐用 cubic-bezier(0.2, 0.8, 0.4, 1) 模拟快速收缩 + 缓慢回弹，比 ease-in-out 更贴切。
- 0% → 30%：快速放大到
scale(1.2)（收缩期） - 30% → 100%：缓慢回落到
scale(1)（舒张期），中间可加轻微过冲再回调增强真实感 - 动画时长建议设为
0.8s～1.2s，太短像抖动，太长失去“搏动”感
transform-origin 要设在中心，否则缩放会偏移
如果元素本身没居中，或父容器有 text-align: center 之类干扰，仅靠 transform: scale() 会导致视觉上“跳动”。根本原因是默认 transform-origin 是 50% 50%，但若元素盒模型位置不稳，缩放中心就飘。
稳妥做法是显式声明：
.heart {
transform-origin: center center;
}
- 避免用
left top或像素值，除非你明确需要偏心缩放 - 若元素是 inline 元素（如
），先加display: inline-block或display: block，否则transform-origin行为不可靠 - 配合
margin: auto或position: absolute+top: 50%; left: 50%; transform: translate(-50%, -50%)确保定位稳定
animation-timing-function 别只用 ease-in-out
ease-in-out 在 0% 和 100% 处导数都为 0，导致起止都“软”，心跳该有明确的“击打感”。实际中更有效的是分段控制：
@keyframes heartbeat {
0% { transform: scale(1); }
30% { transform: scale(1.2); }
60% { transform: scale(0.95); } /* 微过冲，模拟弹性回弹 */
100% { transform: scale(1); }
}
- 整个动画用
animation-timing-function: cubic-bezier(0.2, 0.8, 0.4, 1)，比拆成多个animation更轻量 - 不要给
animation-fill-mode设forwards，心跳是循环动作，停在scale(1)才自然 - 如果叠加颜色脉动（如红→暗红），记得用
will-change: transform提升合成层，避免重排重绘卡顿
兼容性与性能要注意 IE 和低版本 Safari
transform: scale() 在 IE10+ 和 Safari 9+ 基本可用，但 Safari 9–12 对 cubic-bezier() 支持不全，尤其多段贝塞尔容易退化为线性。
- 降级方案：对
Safari ，用@supports (animation-timing-function: cubic-bezier(0,0,0,0))包裹高级缓动，否则 fallback 到ease-in+ease-out组合 - 避免在大量元素上同时跑心跳动画，用
transform虽硬件加速，但频繁触发合成器帧仍可能掉帧 - 移动端慎用
animation-play-state: paused控制启停——部分安卓 WebView 有 bug，恢复后首帧丢弃
最常被忽略的是：动画元素如果带 box-shadow 或 border-radius，在缩放时边缘会模糊或闪烁，加 backface-visibility: hidden 可缓解。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
