opacity 从 0.2→1→0.2 而非 0→1→0，因人眼对完全透明（opacity: 0）极其敏感，会导致关键帧切换时“闪黑”，破坏呼吸连贯性；0.2 起始既保留视觉存在感，又提供足够明暗差模拟呼吸起伏，且首尾值一致可避免跳变。
直接用 @keyframes 控制 opacity 在 0.2 和 1 之间循环，配 ease-in-out 缓动、3s–5s 时长、infinite 次数，就能做出基础呼吸感；但真要自然，得避开几个硬伤：起止值不能是 0 和 1、缓动不能靠默认 ease、动画不能被父级 opacity 或 filter 意外截断。
为什么 opacity 从 0.2 → 1 → 0.2 而不是 0 → 1 → 0
人眼对“完全消失”极其敏感，opacity: 0 会让元素在关键帧切换瞬间“闪黑”，破坏呼吸的连贯性，尤其在深色背景上更刺眼。从 0.2 开始，既能保留存在感，又留出足够明暗差来模拟吸气/呼气的起伏。
-
0%和100%必须设为相同值（如opacity: 0.2），否则动画会跳变或卡在终点 - 中间点（
50%）设opacity: 1，并可微调百分比（比如写成45%）延长高光停留，增强“屏息”感 - 避免用
visibility: hidden或display: none替代低透明度——它们会触发重排，打断动画流
ease-in-out 不够用？试试非标 cubic-bezier
标准 ease-in-out 的缓动曲线太对称，导致亮起和暗下节奏一致，像机械开关。真实呼吸有“吸气慢、呼气略快、末端微顿”的物理特性，必须用非标准贝塞尔函数拉出弹性。
- 推荐用
cubic-bezier(0.34, 1.56, 0.64, 1)：第二参数1.56 > 1让起始段更缓，第四参数1让结束段收得更稳 - 不要手写超限参数却忽略兼容性：IE10–11 和旧 Edge（≤18）遇到含 >1 参数的
cubic-bezier()会直接降级为ease，需用@supports做降级 - 若只支持基础浏览器，宁可用
ease-in-out+ 调整关键帧偏移（如0%{opacity:0.2},30%{opacity:1},100%{opacity:0.2}）来模拟停顿
animation 简写写错，动画就静音
CSS 动画不触发，八成是 animation 简写格式非法。浏览器对语法错误零容忍，错一个字符、漏一个单位，整条声明就被丢弃。
- 完整顺序不可乱：
animation: <name><duration><timing-function><delay><iteration-count><direction><fill-mode><play-state></play-state></fill-mode></direction></iteration-count></delay></timing-function></duration></name> - 常见错误：
animation: breathe 3s infinite ease-in-out——infinite写在timing-function后面，浏览器按顺序解析会把infinite当作delay，而delay必须带单位（如s或ms），于是整条失效 - 安全写法：显式写出所有必要项，例如
animation: breathe 4s ease-in-out 0s infinite；或拆成独立属性，调试更直观
父容器 opacity/filter 会悄悄吃掉你的呼吸效果
子元素的 opacity 不是绝对值，而是相对于父级的乘积结果。如果父容器设了 opacity: 0.8，你再怎么把子元素设成 opacity: 1，最终也只到 0.8；同理，父级 filter: blur(2px) 会让过渡边缘糊化，削弱呼吸的清晰节奏。
- 检查 DevTools 的
Computed面板，确认目标元素的最终opacity确实能在0.2–1区间变化 - 优先用
rgba()或hsl()控制背景/文字颜色半透，而不是依赖层级叠加的opacity - 若必须嵌套，给呼吸元素加
isolation: isolate阻断混合模式影响（仅现代浏览器支持）
最易被忽略的是多灯异步控制：别靠 JS 随机生成 animation-delay，CSS 里负延迟（如 animation-delay: -1s）合法且高效，能让动画从中间帧切入，比正延迟更自然；但得确保总周期一致，否则节奏会散掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
