CSS关键帧动画中color-mix()和hsl(from)失效，因浏览器解析@keyframes时仅认字面颜色值（如hsl()、rgb()），不执行函数计算或变量求值；混用颜色格式会导致插值中断，推荐全程统一使用hsl()以保障平滑过渡。
不能用 CSS 插值语法（color-mix()、hsl(from ...) 等）直接写进 @keyframes 里做颜色动画 —— 浏览器目前不支持，写了也无效。 所有颜色循环动画必须靠显式定义关键帧 + 统一颜色格式实现。
为什么 color-mix() 和 hsl(from) 在 @keyframes 中会失效
这些新语法虽已在 Chrome 125+ / Safari 17+ 支持，但仅限于普通声明（如 background-color: color-mix(in srgb, red, blue)），@keyframes 内部仍被当作静态字符串解析，不触发运行时计算。实测中写进去会导致整段 keyframes 被忽略，动画退回到初始色或完全不启动。
- 浏览器解析
@keyframes时不做 CSS 函数求值，只认字面值（rgb(255,0,0)、hsl(0,100%,50%)） -
color-mix(in srgb, var(--a), var(--b))同样不生效 —— 变量和函数双重不可用 - 试图用
hsl(from #ff0 h s l)做相对色相偏移？它只在非动画上下文（如 :hover 伪类）中起作用
真正能动的颜色动画：关键帧必须全用同一种格式
浏览器插值依赖颜色空间的连续性。混用格式（比如 0% { background-color: #f00; } 和 50% { background-color: rgb(0,255,0); }）会让插值中断，动画卡在第一帧或跳变。
- ✅ 推荐全用
hsl()：色相（h）可线性过渡，做彩虹循环最稳，例如hsl(0, 100%, 60%) → hsl(360, 100%, 60%) - ✅ 全用
rgb()或rgba()也行，但注意 alpha 值要一致，否则透明度跳变明显 - ❌ 避免
#ff0和rgb()混用；hsl()和hex混用同样危险 - ⚠️ 即使全用 hex，
#f00→#0f0→#00f看似合理，但底层转成 sRGB 插值后可能发灰，不如 hsl 可控
animation 属性的关键参数怎么设才不翻车
光写对 @keyframes 不够，animation 的组合方式直接影响是否循环、是否卡顿、是否符合可访问性要求。
-
animation-duration别设太短：低于 2s 容易触发 WCAG 闪烁风险（2–55 Hz），尤其红蓝强对比色 -
animation-iteration-count: infinite要慎用 —— 用户无法主动关闭，暗色模式下还可能和系统偏好冲突 - 加
animation-fill-mode: forwards只在单次动画有意义；循环动画下它无效果，别白加 - 缓动函数优先选
linear或ease-in-out：steps(1)是硬切，适合“指示灯”类闪动，但多数场景显得生硬 - 想暂停/重启？JS 控制
element.style.animationPlayState = 'paused'比重写 class 更可靠
需要动态换色组？别硬改 @keyframes，用 JS 注入或 element.animate()
纯 CSS 无法根据变量实时生成关键帧，所谓“CSS 变量驱动颜色动画”是常见误解。真要响应主题切换或运营配置，得走 JS 路径。
- 预设多套
@keyframes（如cycle-red、cycle-blue），再用 class 切换animation-name - 动态注入规则：用
document.styleSheets[0].insertRule('@keyframes dynamic {...}', index)，避免 innerHTML style 标签引发重排 - 更灵活的方案是
element.animate(keyframes, options)，可实时算出每帧 hsl 色相值，但需手动管理fillMode和暂停逻辑 - 注意：Safari 对
element.animate()的 color 支持略滞后，建议降级 fallback 到 CSS 方案
最常被忽略的一点：动画性能不只看帧率。background-color 动画本身是合成层友好的，但如果父容器有 transform: translateZ(0) 或 will-change: transform，反而可能因强制图层拆分导致掉帧。真要优化，先确认没误加这些属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
