核心是模拟自然呼吸节奏：起始稳态→缓慢扩张→短暂停顿→柔和回缩，需用cubic-bezier非对称时间函数、hsl色相循环、分段关键帧及animation-fill-mode: both确保无缝循环。
用 @keyframes 控制颜色与透明度的平滑循环
呼吸感的核心不是单纯变大变小，而是模拟自然起伏的节奏感：起始稳态 → 缓慢扩张 → 短暂停顿 → 柔和回缩。CSS 中最直接的方式是同时控制 opacity 和 transform: scale()，再叠加色相（hsl()）变化实现颜色循环。
关键点在于时间函数和关键帧分布：不能用线性，得用 cubic-bezier(0.4, 0, 0.2, 1)（即 ease-in-out 的变体），且 0% 和 100% 帧必须完全一致，中间 50% 设为峰值状态。
- 颜色用
hsl()而非rgb()或十六进制，方便通过h值做循环（比如从 0 到 360） - 避免在
0%和100%写不同值，否则动画会跳变 - 若用
background-color动画，确保元素有明确尺寸（width/height或min-width），否则缩放不可见
避免 animation-timing-function 错配导致“卡顿感”
很多人用 ease 或默认 ease，结果呼吸节奏生硬、像抽搐。真正呼吸是“吸气慢→屏息→呼气略快”，对应动画曲线应是非对称的：前半段缓入更长（0%→50% 占 60% 时间），后半段稍快回弹（50%→100% 占 40%）。
实操建议直接写分段关键帧，而不是依赖单个 timing-function：
立即学习“前端免费学习笔记（深入）”；
@keyframes breathe {
0% { opacity: 0.7; transform: scale(1); background-color: hsl(0, 80%, 60%); }
50% { opacity: 1; transform: scale(1.08); background-color: hsl(180, 80%, 60%); }
100% { opacity: 0.7; transform: scale(1); background-color: hsl(360, 80%, 60%); }
}
注意：hsl(360, ...) 等价于 hsl(0, ...)，保证首尾颜色无缝衔接；scale(1.08) 是经验上限，超过 1.1 就容易失真。
用 animation-iteration-count: infinite 时别漏掉 animation-fill-mode
如果不设 animation-fill-mode: forwards，动画第一帧开始前元素会处于未定义状态（比如透明或无背景），造成闪一下才启动。而 forwards 能让元素停留在最后一帧样式——但这里恰恰不能用它，因为循环动画需要回到起点。
- 正确写法是
animation-fill-mode: both：既保留初始帧（backwards），又维持循环中的连续性（forwards效果被覆盖） - 更稳妥的做法是显式声明初始状态，然后只靠
infinite驱动，不依赖fill-mode - 移动端 Safari 对
hsl()动画偶有渲染延迟，可加will-change: transform, opacity提前提示合成层
在 React/Vue 等框架中动态控制呼吸节奏的坑
如果想用 JS 控制呼吸频率（比如根据用户心跳数据调整周期），不要直接改 style.animationDuration —— 这会重置整个动画，导致“重吸一口气”的突兀感。
可行方案是用 CSS 自定义属性 + calc()：
:root { --breathe-duration: 4s; }
.breathing {
animation: breathe var(--breathe-duration) ease-in-out infinite;
}
然后 JS 只需更新 document.documentElement.style.setProperty('--breathe-duration', '6s')，浏览器会平滑过渡周期变化。
注意：Chrome 115+ 支持 animation-timeline，但兼容性差；现阶段最稳的仍是 CSS 变量驱动。
呼吸动画最难的不是写出来，而是让节奏不机械——多调几次 50% 帧的位置和 scale 幅度，比堆参数更重要。
