真实心跳动效需用非对称cubic-bezier缓动、0.97–1.04缩放区间、25%关键帧快速回弹；ecg波形必须用svg stroke-dasharray动画实现，css clip-path无法模拟连续生理波形。
心跳跳动用 transform: scale() 就够，但节奏不对就假
纯缩放实现心跳最轻量，但真实心跳不是匀速放大缩小：收缩快、舒张慢，有弹性回弹感。直接写 0% { scale(1) } → 50% { scale(1.05) } → 100% { scale(1) } 会显得机械。
- 用
ease-in-out或自定义cubic-bezier(.2, .8, .4, 1)模拟心肌张力变化，比默认ease更自然 - 关键帧别只设两端——加一个
25%点快速回弹（如scale(0.98)），再升到峰值，能强化“搏动感” - 避免
scale(1.2)这类夸张值，真实心跳视觉缩放通常在0.97–1.04区间，超过 1.05 容易失真 - 如果元素带边框或阴影，记得同步加
transform-origin: center，否则缩放时边缘会抖
心电图波浪必须用 SVG + stroke-dasharray，CSS clip-path 做不了连续波动
CSS 的 clip-path 只能做静态裁切或简单过渡，无法生成带时间偏移、多相位叠加的 ECG 波形（P-QRS-T）。真要模拟，得靠 SVG 路径动画。
- 先用
<path d="M0,50 L20,30 L40,50 L60,70 L80,50..."></path>手绘或导出标准 ECG 路径 - 通过
stroke-dasharray和stroke-dashoffset配合@keyframes实现“画线”效果，例如：stroke-dasharray: 200; stroke-dashoffset: 200;→0 - 想加“实时刷新”感？用 JS 动态更新
stroke-dashoffset值，比纯 CSS 动画更可控 - 别用多个
div拼波形——每个 div 的渲染开销远高于单个 SVG，滚动或缩放时容易掉帧
animation-timing-function 决定是“心跳”还是“抽搐”
同一个缩放动画，linear 是节拍器，steps(2) 是故障风，而真实心跳依赖非对称缓动。
-
ease-in：适合模拟心室快速收缩（前半程加速） -
ease-out：适合舒张期缓慢回位（后半程减速） - 组合写法：
animation: beat 1.2s cubic-bezier(0.3, 0, 0.2, 1) infinite;—— 前 30% 几乎不动，中间陡升，尾部拖长，接近生理曲线 - 慎用
step-start/step-end，它们会让动画卡顿，只适合数字跳变类 UI，不适用于生物节律
移动端 Safari 对 transform: scaleZ() 和 3D 变换有渲染 bug
某些 iOS 版本（尤其是 iOS 15–16）在启用 will-change: transform 或混合 2D/3D 变换时，缩放动画会出现闪烁或错位，尤其在 scale() 后接 rotate() 时。
- 统一用 2D 变换：
transform: scale(1.02) translateZ(0)比scale3d(1.02,1.02,1)更稳 - 避免在动画中动态切换
transform类型（比如从scale切到scale3d），会触发重排 - 真要兼容老 Safari，把
@keyframes中的transform拆成scaleX和scaleY单独写，虽然冗余但可靠
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
