真正自然的呼吸灯效果需用cubic-bezier(0.34, 1.56, 0.64, 1)模拟吸气过冲与呼气柔降，配合0%–50%–100%关键帧、opacity 0.2–0.95区间及animation-delay整数分相位，避免ease-in-out僵硬节奏。
直接用 animation 控制 opacity 做“呼吸灯”，最容易掉进“假呼吸”陷阱——看着在闪，但节奏僵硬、停顿生硬、亮暗不匀。真正像呼吸，得让亮度升得缓、停得稳、降得柔、暗得久。
为什么 ease-in-out 不是呼吸节奏
很多人照搬示例写 animation: breathe 3s ease-in-out infinite，结果灯光像被掐住脖子：0%→50% 陡升，50%→100% 急坠，中间没“屏息”，暗态也留不住。这是因为 ease-in-out 是对称缓动，而真实呼吸吸气长、呼气略短、高低点都有微停。
- 别用
ease、linear或默认ease，它们无法模拟呼吸的非线性张力 - 必须用自定义
cubic-bezier(0.34, 1.56, 0.64, 1)：第二参数 >1 实现“吸气过冲”，第四参数 =1 保证收尾干净 - 关键帧必须显式写
0%、50%、100%，且50%处设opacity: 1并加offset微调（如@keyframes中可配合50.2%稍延高光时间）
@keyframes 里 opacity 的起止值怎么设
起止透明度不能拉满到 0 和 1。设 opacity: 0 会彻底消失，失去“微光维持”的呼吸感；设 opacity: 1 又容易在深色背景上溢出光晕（尤其 OLED 屏）。
- 推荐区间：暗态用
opacity: 0.2–0.4，亮态用opacity: 0.9–0.95（避开纯白光刺眼） - 若背景是纯黑
#000，且灯色为高饱和蓝/绿（如#00aaff），务必把亮态上限压到0.85，防子像素溢出虚边 - 不要只动画
opacity：叠加box-shadow扩散变化（如从0 0 8px rgba(0,123,255,0.4)到0 0 32px rgba(0,123,255,0.7)），视觉更饱满
多灯异步闪烁时，animation-delay 怎么算才不乱
常见错误是给每个灯随机设 animation-delay: 0.3s、0.7s、1.2s……结果几秒后节奏全崩。因为没对齐周期基准。
立即学习“前端免费学习笔记（深入）”；
- 所有灯必须用**相同**的
animation-duration（比如统一4s），否则相位永远不同步 -
animation-delay应取周期的整数分之一：如 4s 周期，就用0s、1s、2s、3s，这样每 4 秒自动重对齐 - 避免用小数毫秒级延迟（如
0.37s），浏览器渲染精度有限，反而导致错位累积 - 如果要用 SVG 灯，优先动画
fill-opacity而非容器opacity，避免影响内部文字或图标
性能抖动和 IE 兜底怎么处理
连续改 opacity 在某些 Chrome 版本或低端安卓 WebView 里仍会触发层合成抖动，尤其叠了 box-shadow 或 filter 时；IE10–11 则直接跳变，不插值。
- 加
will-change: opacity，但**仅在动画开始前动态加、结束时移除**（监听animationstart/animationend事件） - 禁用
transform+opacity同时动画：旧版 Safari 会强制 CPU 渲染，帧率骤降 - IE/Edge Legacy 下，用
@supports not (animation: test) { ... }检测，降级为transition+ JS 定时 toggle class（虽不平滑，但至少有明暗） - 测试时打开 Chrome DevTools → Rendering → 勾选 “Paint flashing”，确认只有灯区域闪蓝，无意外重绘块
最常被忽略的一点：呼吸节奏不是越慢越好。低于 2.5s 像心跳，高于 5s 易被用户忽略；而真正难调的是“高光停留时长”——它决定了呼吸是否像活物，不是靠改 duration，而是靠 cubic-bezier 的第二、三参数微调曲线肩部。
