呼吸灯动画需opacity与transform协同变化，采用3–4秒三段式关键帧（0%/50%/100%），配合scale微调、alternate方向及自定义cubic-bezier缓动，确保自然呼吸感。
呼吸灯动画的核心是 opacity 和 transform 的协同变化
单纯用 opacity 从 0.2 到 1 再回退，视觉上会显得“卡顿”或“断层”，因为人眼对亮度变化敏感但对轻微缩放不敏感。真正自然的呼吸感，需要叠加一个微小的尺度脉动（比如 scale(0.98) → scale(1.02)），让元素像在轻微起伏。关键不是动得有多快，而是节奏是否符合真实呼吸周期（建议总时长设为 3–4s，比默认的 1s 更可信）。
@keyframes 中必须用 from/to 或 0%/100% 明确起止状态
漏写 from 或只写 to 是常见错误，会导致动画第一次播放异常（比如闪一下再开始）。浏览器对不完整关键帧的 fallback 行为不一致，尤其在 Safari 中容易失效。务必显式定义两端：
@keyframes breathe {
from {
opacity: 0.3;
transform: scale(0.97);
}
to {
opacity: 1;
transform: scale(1.03);
}
}
不要用 50% 中间帧代替——呼吸不是对称的“上下半程”，真实呼吸是吸气慢、呼气略快，所以更推荐用三段式控制节奏（见下一点）。
用 0%/50%/100% 实现非线性缓动，避免生硬的 ease-in-out
animation-timing-function: ease-in-out 会让呼吸看起来像机械钟摆，缺乏生命感。改用分段关键帧，手动控制速度分布：
- 0% → 50%：缓慢上升（模拟吸气），占总时长 60% 左右
- 50% → 100%：稍快回落（模拟呼气），占剩余 40%
对应代码：
@keyframes breathe {
0% { opacity: 0.3; transform: scale(0.97); }
50% { opacity: 1; transform: scale(1.03); }
100% { opacity: 0.3; transform: scale(0.97); }
}
这样动画在高点停留略久，更接近生理节奏。同时注意：transform 必须始终包含 scale()，哪怕数值微小，否则部分浏览器（如旧版 Edge）可能忽略 opacity 动画。
无限循环需同时设置 animation-iteration-count 和 animation-direction
只写 infinite 不够——它默认是“重头播”，每次回到 0% 都会突兀重置，破坏呼吸连贯性。要加 animation-direction: alternate，让动画正向播完后反向播，形成平滑往复：
.breathing-light {
animation-name: breathe;
animation-duration: 3.6s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: cubic-bezier(0.3, 0.1, 0.3, 1.1); /* 微调缓动 */
}
其中 cubic-bezier(0.3, 0.1, 0.3, 1.1) 是关键：y2 > 1 允许“过冲”，让 scale 在顶点处有轻微弹性，这是呼吸感的最后一点细节。别用 linear，它太死板；也别用系统默认 ease，它收尾太急。
实际应用中，最容易被忽略的是 transform 的初始值——如果元素本身已有 transform: rotate(5deg)，那动画里的 scale() 会被覆盖，必须合并写成 transform: rotate(5deg) scale(0.97)，否则呼吸就消失了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
