color-mix()和hsl(from)在@keyframes中无效，因浏览器将其当作静态字符串解析，不执行函数求值或变量计算，仅支持rgb()、hsl()等字面颜色值的线性插值。
浏览器根本不执行 color-mix() 或 hsl(from) 这类函数的插值计算——它们写进 @keyframes 里就等于没写，动画直接失效或退回到初始色。
为什么 color-mix() 和 hsl(from) 在 @keyframes 中无效
这些函数虽已在 Chrome 125+ / Safari 17+ 支持，但仅限普通 CSS 声明（比如 background-color: color-mix(in srgb, red, blue);）。@keyframes 内部被浏览器当作静态字符串解析，不触发运行时求值。
- 实测中写入会导致整段
@keyframes被忽略，动画不启动或卡在第一帧 -
color-mix(in srgb, var(--a), var(--b))同样不生效：变量 + 函数双重不可用 -
hsl(from #ff0 h s l)只在非动画上下文（如:hover）中起作用
@keyframes 中颜色插值真正依赖什么
浏览器只对字面颜色值做线性插值，且要求格式统一、空间连续。它不关心你是怎么“算出来”的，只认最终可解析的值。
- ✅ 全用
hsl()：色相h可线性过渡，做彩虹循环最稳，例如hsl(0, 100%, 60%) → hsl(360, 100%, 60%) - ✅ 全用
rgb()或rgba()：注意 alpha 值必须一致，否则透明度跳变明显 - ❌ 混用格式：比如
#f00和rgb(0,255,0)、hsl()和#00f，插值会中断或发灰 - ⚠️ 即使全用 hex：
#f00 → #0f0 → #00f表面合理，但底层转 sRGB 插值后中间色可能偏暗、失饱和
transition 场景下颜色插值的实操要点
和 @keyframes 不同，transition 对颜色格式宽容些，但仍有隐性陷阱。
-
transition必须写在默认状态（如.btn { color: blue; transition: color 0.3s ease; }），不能只写在:hover里 - 起始/结束色建议统一用
hsl()或rgba()，避免#333 → rgb(255,0,0)这类混用 - alpha 变化要显式控制：从
rgba(0,0,0,1)到rgba(255,0,0,0.8)是平滑的；但hsl(0,0%,0%) → rgba(255,0,0,0)会因格式切换导致跳变 - 老版本 Safari（iOS 12 / Safari 12）有渲染抖动，需加
-webkit-transition前缀
真正影响颜色转场质量的，从来不是“用了多新潮的语法”，而是你有没有让浏览器拿到一组可预测、可线性映射的输入值——格式统一、空间一致、无运行时依赖，才是插值能稳住的底层前提。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
