OKLCH呼吸灯动画需用@keyframes直接插值色相（H），固定L和C参数，配合ease-in-out时序、infinite与alternate实现自然闭环；禁用filter:hue-rotate()或HSL转换，优先绑定background-color。
OKLCH色相动画必须用 @keyframes 配合 color 或 background-color 直接插值
OKLCH 是支持色相连续变化的少数色彩空间之一，但浏览器不会自动把 oklch(0.6 0.2 0) 到 oklch(0.6 0.2 360) 当作“同一颜色通道的平滑过渡”——它只在你显式声明色相（第三个参数）为动画属性时才生效。直接写 from { background-color: oklch(0.6 0.2 0); } to { background-color: oklch(0.6 0.2 360); } 就行，不需要 JS 干预。
常见错误是试图用 hsl() 动画后“转换成 OKLCH”，这会导致色相跳变或饱和度塌陷；也有人误以为要靠 calc() + 自定义属性驱动，其实纯 CSS 更稳。
- OKLCH 的色相范围是 0–360，且是圆周连续的（360 等价于 0），动画自然闭环
- 务必固定前两个参数（L 和 C），只让色相（H）变化，否则亮度/彩度抖动会破坏“呼吸灯”的纯净感
- Chrome 111+、Safari 16.4+、Firefox 117+ 支持 OKLCH 动画；旧版 Safari 需加
lab()回退（但 lab 色相不连续，慎用）
用 animation-timing-function: ease-in-out 模拟呼吸节奏比线性更真实
呼吸灯不是匀速变色，而是缓慢亮起、稍作停留、再缓慢回落。CSS 中最贴近的时序函数就是 ease-in-out，它让色相变化在两端减速，中间略快——和人眼感知的“呼吸”一致。
别用 steps() 或 cubic-bezier(0.4, 0, 0.2, 1) 去强行拟合生理曲线，实测 ease-in-out 在 3–5 秒周期内效果最自然。
立即学习“前端免费学习笔记（深入）”；
- 典型周期设为
4s：太短像闪烁，太长失去呼吸感 - 加
infinite和alternate可省去 360→0 的跳变（alternate让动画来回走，避免色相突兀归零） - 如果想强调“吸气”慢、“呼气”稍快，可用
cubic-bezier(0.3, 0, 0.7, 1)，但差异细微，多数场景不值得折腾
避免在伪元素或 border 上直接动画 OKLCH 导致渲染异常
部分浏览器（尤其是 Safari 16.4–17.2）对 ::before / ::after 的 OKLCH 动画支持不稳定，可能出现色块撕裂或帧率骤降；border-color 动画 OKLCH 也偶发卡顿。
安全做法是把动画绑定到容器的 background-color 或 color，再通过子元素继承或遮罩实现视觉效果。
- 不要写
div::after { animation: hue-rotate 4s infinite; background: oklch(...); } - 改用
div { background: oklch(0.6 0.2 0); animation: breathe 4s ease-in-out infinite alternate; } - 若需边缘发光效果，用
box-shadow: 0 0 12px oklch(...)并同样动画该 shadow 值——它比 border 更可靠
OKLCH 色相动画无法通过 filter: hue-rotate() 替代
hue-rotate() 作用于 sRGB 空间，对 OKLCH 颜色做旋转只是粗略近似，尤其在高彩度区域会产生明显偏色（比如青→紫段失真）。它改变的是显示像素的色调映射，而非真正沿 OKLCH 色相环移动。
实测对比：同一组 OKLCH 起止值，用 background-color 动画过渡顺滑无断层；用 filter: hue-rotate(0deg) → hue-rotate(360deg) 会在 90°–180° 区间出现灰阶干扰和饱和度衰减。
- 除非兼容性要求压倒一切（如必须支持 Chrome 100 以下），否则别妥协用
filter -
hue-rotate()的单位是 deg，但它的“0–360”不对应 OKLCH 色相角，数值不能直接映射 - 动画
filter还额外触发重绘，性能不如原生 color 属性
OKLCH 呼吸灯真正的难点不在写法，而在于 L 和 C 的初始值选择——L 太低（0.3）在暗背景下易刺眼。建议从 oklch(0.7 0.15 0) 起手调，用 DevTools 实时拖动 H 滑块验证过渡是否干净。
