真实心跳动画需用 transform: scale() 配合 @keyframes 实现“快收→微停→猛扩”节奏，推荐缩放范围 0.95→1.1，关键帧时间分配为 0%→30%→35%→100%，并分段使用 cubic-bezier 缓动曲线控制速度剖面。
直接用 transform: scale() 配合 @keyframes 就能做出真实感强的心跳动画，不需要 JS，但关键在缓动曲线和缩放比例的控制——多数人做的“心跳”只是来回放大缩小，缺少收缩-骤停-爆发式扩张的生理节奏感。
为什么 scale(0.95) → scale(1.1) 比 scale(0.8) → scale(1.2) 更像真心跳
真实心肌收缩期短而有力，舒张期相对缓慢；动画里就要体现“快收→微停→猛扩”的非对称节奏。单纯线性或 ease-in-out 会显得机械。
- 推荐关键帧时间分配：
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-radius和box-shadow加动画，否则缩放时边缘会“抽搐”
@keyframes heartbeat 必须配 animation-timing-function: cubic-bezier(...)
CSS 默认的 ease 或 ease-in-out 无法模拟心肌张力突变。必须手写贝塞尔曲线控制速度剖面。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 收缩段（0% → 30%）：用
cubic-bezier(0.5, 0, 0.9, 0.1)—— 起始快、末端急刹 - 扩张段（35% → 100%）：用
cubic-bezier(0.2, 0.6, 0.4, 1)—— 起始慢、后程陡升，模拟射血期加速度 - 不要把整段动画塞进一个
animation-timing-function：CSS 不支持分段缓动，得靠多关键帧+手动控制速度变化点
如何让心跳动画响应点击或数据状态（不用 JS 监听）
纯 CSS 方案依赖伪类或属性选择器触发，适合简单交互场景；真要绑定数据变化，还是得 JS 控制 class 切换。
立即学习“前端免费学习笔记（深入）”；
- 点击激活：给元素加
:active伪类，配合animation-play-state: running，但注意移动端:active持续时间极短，需用animation-fill-mode: forwards锁定末帧 - 状态驱动：定义
.pulse--activeclass，JS 只负责增删该 class；动画本身保留在@keyframes和基础选择器里，解耦逻辑与表现 - 慎用
animation-iteration-count: infinite：自动循环会让“心跳”失去临床意义（比如监护仪只在检测到脉搏时才动），加个animation-play-state: paused初始态更可控
真正难的不是做出来，而是让每次缩放的幅度、停顿的毫秒数、阴影模糊度的变化都落在生理合理区间——调参时盯着心电图 R 波和动脉压波形比对着设计稿调更有效。
