呼吸灯必须用@keyframes定义opacity循环，定位仅用于布局；animation简写需含名称、时长、iteration-count三要素；多灯错相须对齐公共周期，移动端需加will-change: opacity优化。
呼吸灯必须用 @keyframes 定义 opacity 循环，不能只靠定位
很多人误以为“定位 + 动画”是指用 position: absolute 配合 top/left 移动来模拟呼吸——这是错的。呼吸灯的本质是明暗节奏，不是位移。真正起作用的只有 @keyframes 里对 opacity（或 transform: scale()、box-shadow）的渐变控制。
定位只是用来把灯放在页面指定位置，和动画逻辑无关。如果你看到示例里有 position: relative 或 absolute，那只是为了布局居中、叠加层级，不是动画驱动因素。
-
position类属性不影响动画行为，但影响渲染层叠：如果呼吸灯被overflow: hidden的父容器裁剪，动画会“被砍掉” - 想让灯始终居中？用
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)，别在@keyframes里反复改top/left - 多个灯需错开闪烁？靠
animation-delay，不是靠初始left值不同
animation 简写必须带时长和 infinite，漏一项就失效
常见错误是写成 animation: breathe 3s; 或 animation: breathe infinite;——浏览器会直接忽略整条声明，因为缺少必要参数。标准简写格式强制要求至少包含动画名、时长、迭代次数三要素。
- 正确写法：
animation: breathe 4s ease-in-out infinite; - 错误写法：
animation: breathe 4s infinite;（缺缓动函数，部分浏览器降级为ease，但 iOS Safari 可能不触发） - 更危险的拼写：
infininte、infitite—— 浏览器识别失败，动画静止 - 如果想暂停动画，用
animation-play-state: paused，别删animation属性，否则重绘状态丢失
多灯异步闪烁要靠 animation-delay 对齐周期，不是随机设值
给三个灯分别加 animation-delay: 0.3s、0.7s、1.2s，几秒后节奏就彻底散掉。因为没对齐公共周期基准，相位持续漂移。
- 所有灯必须用相同
animation-duration（比如统一4s） -
animation-delay应取周期的整数分之一：0s、1s、2s、3s（对应四灯错相） - 这样每过 4 秒，所有灯自动重同步一次，视觉节奏稳定
- 避免在 JS 中动态计算 delay——CSS 自身就能处理，更可靠
移动端 Safari 会降频 opacity 动画，will-change: opacity 是刚需
iOS 15 以前的 Safari 在低功耗模式下，会主动把 opacity 动画帧率压到 15fps 左右，呼吸节奏断续。这不是 bug，是系统策略。不加优化，用户会觉得灯“卡”或“跳”。
- 必须加：
will-change: opacity;（注意不是will-change: transform） - 但别全局加——只在呼吸灯元素上设置，且避免长期挂载（可用
animationstart事件添加，animationend移除） - 若同时用了
box-shadow扩散，优先动画box-shadow而非opacity，Safari 对阴影变化更友好 - 深色 OLED 屏上，亮态
opacity别设到1，用0.92～0.95防子像素虚边
opacity 循环，但节奏感、多灯协同、移动端渲染策略这三点一碰就偏——尤其是你调好一个灯觉得完美，加第二个就开始不对劲的时候，问题大概率出在 animation-delay 没对齐周期，或者 will-change 没生效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
