心跳动画核心是模拟收缩快（0.2s）、舒张慢（0.4–0.5s）且带过冲回落的节奏，需用自定义cubic-bezier缓动与非对称关键帧比例实现，而非简单对称缩放。
用 CSS 实现心跳节奏动画，核心是模拟真实心跳的“收缩—舒张”过程：先快速收缩（scale 缩小），再稍慢回弹（scale 放大并略超原始尺寸），最后缓落回常态。关键在于 timing-function 的选择和关键帧的比例控制，而不是单纯来回缩放。
心跳动画的关键节奏逻辑
真实心跳不是匀速对称的：收缩快（约 0.2s）、舒张慢（约 0.4–0.5s），且舒张时会轻微“过冲”（比原始大小略大），再回落。CSS 中可用 cubic-bezier(0.2, 0.8, 0.4, 1) 模拟这种弹性回弹感；避免使用 ease-in-out（太对称，像呼吸不是心跳）。
基础心跳 keyframes 写法（含 scale + 可选颜色/阴影增强）
以下是一个轻量、可复用的心跳动画定义：
@keyframes heartbeat {
0% {
transform: scale(1);
}
14% {
transform: scale(1.3); /* 快速放大 → 模拟心肌强力收缩（视觉上“砰”一下） */
}
28% {
transform: scale(0.85); /* 快速回缩 → 模拟舒张初期，略低于原尺寸 */
}
42% {
transform: scale(1.05); /* 弹性过冲 → 舒张末期轻微鼓起 */
}
70% {
transform: scale(0.95); /* 缓落准备 */
}
100% {
transform: scale(1);
}
}
配合使用：
立即学习“前端免费学习笔记（深入）”；
.cssicon {
animation: heartbeat 1.2s cubic-bezier(0.28, 0.76, 0.32, 0.96) infinite;
}
- 1.2s 总时长 接近正常静息心率（50–60bpm），可按需调为 1.0s（60bpm）或 1.5s（40bpm）
- cubic-bezier(0.28, 0.76, 0.32, 0.96) 是自定义缓动：前段陡升（快收缩），后段平缓拖尾（慢回落），比内置 ease 更精准
- 若想加视觉反馈，可在 14% 加
filter: drop-shadow(0 0 12px rgba(255,80,80,0.6))，在 42% 加background-color: #ff6666等，强化“搏动感”
让图标更自然：避免生硬跳变
直接 scale 容易边缘抖动，尤其带描边或文字的图标。建议：
- 给图标容器设
transform-origin: center（确保缩放围绕中心） - 添加
will-change: transform提升动画性能（尤其低配设备） - 如果图标是 SVG，推荐在
<svg>标签上直接应用动画，而非外层 div，减少重排干扰 - 如需暂停/激活控制（比如 hover 触发），用
animation-play-state: paused / running替代重启动画
进阶：脉冲+心跳复合动效（适合高亮状态）
纯 scale 心跳略单薄，可叠加一层缓慢透明度/亮度脉动，制造“血流充盈”错觉：
@keyframes heartbeat-pulse {
0%, 100% { opacity: 1; filter: brightness(1); }
50% { opacity: 0.85; filter: brightness(1.15); }
}
<p>.cssicon {
animation:
heartbeat 1.2s cubic-bezier(0.28, 0.76, 0.32, 0.96) infinite,
heartbeat-pulse 3.6s ease-in-out infinite;
}</p>注意：两个动画时长取公倍数（如 1.2s × 3 = 3.6s），避免相位混乱。
基本上就这些——不复杂但容易忽略的是节奏比例和缓动曲线。调好那几个百分比和贝塞尔值，心跳就活了。
