真实心跳动画需用 transform: scale() 配合 @keyframes 实现“快收→微停→猛扩”节奏，推荐缩放范围 0.95→1.1，关键帧时间分配为 0%→30%→35%→100%，并分段使用 cubic-bezier 缓动曲线控制速度剖面。
直接用
配合
就能做出真实感强的心跳动画，不需要 JS，但关键在缓动曲线和缩放比例的控制——多数人做的“心跳”只是来回放大缩小，缺少收缩-骤停-爆发式扩张的生理节奏感。
为什么
→
比
→
更像真心跳
真实心肌收缩期短而有力，舒张期相对缓慢；动画里就要体现“快收→微停→猛扩”的非对称节奏。单纯线性或 ease-in-out 会显得机械。
推荐关键帧时间分配：
（正常）→
（快速压到
）→
（短暂停顿，模拟等容收缩期末）→
（爆发至
，用
强化加速感）
避免用
这类夸张值：视觉上像“塌陷”，不是“收缩”；
已足够传递搏动感，再大反而失真
如果容器有边框或阴影，记得同时给
和
加动画，否则缩放时边缘会“抽搐”
必须配
CSS 默认的
或
无法模拟心肌张力突变。必须手写贝塞尔曲线控制速度剖面。
收缩段（0% → 30%）：用
—— 起始快、末端急刹
扩张段（35% → 100%）：用
—— 起始慢、后程陡升，模拟射血期加速度
不要把整段动画塞进一个
：CSS 不支持分段缓动，得靠多关键帧+手动控制速度变化点
如何让心跳动画响应点击或数据状态（不用 JS 监听）
纯 CSS 方案依赖伪类或属性选择器触发，适合简单交互场景；真要绑定数据变化，还是得 JS 控制 class 切换。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
点击激活：给元素加
伪类，配合
，但注意移动端
持续时间极短，需用
锁定末帧
状态驱动：定义
class，JS 只负责增删该 class；动画本身保留在
和基础选择器里，解耦逻辑与表现
慎用
：自动循环会让“心跳”失去临床意义（比如监护仪只在检测到脉搏时才动），加个
初始态更可控
真正难的不是做出来，而是让每次缩放的幅度、停顿的毫秒数、阴影模糊度的变化都落在生理合理区间——调参时盯着心电图 R 波和动脉压波形比对着设计稿调更有效。
transform: scale()@keyframesscale(0.95)scale(1.1)scale(0.8)scale(1.2)0%30%scale(0.95)35%100%scale(1.1)cubic-bezier(0.2, 0.6, 0.4, 1)scale(0.5)scale(1.1)border-radiusbox-shadow@keyframes heartbeatanimation-timing-function: cubic-bezier(...)easeease-in-outcubic-bezier(0.5, 0, 0.9, 0.1)cubic-bezier(0.2, 0.6, 0.4, 1)animation-timing-function:activeanimation-play-state: running:activeanimation-fill-mode: forwards.pulse--active@keyframesanimation-iteration-count: infiniteanimation-play-state: paused