CSS变量不能在@keyframes中直接动画化，因其不参与级联；需绑定到可动画的原生属性（如transform），或用--progress+calc()/hsl()间接实现颜色过渡，且变量与动画目标须同元素或动态更新。
关键帧里直接用--my-color会失效
CSS变量（自定义属性）本身不支持在@keyframes中直接被动画化——浏览器不会追踪--my-color值的变化，哪怕你在不同关键帧里反复赋值，最终渲染的只是最后一帧的计算结果。这不是bug，是规范设计：CSS变量是级联（cascading）产物，而@keyframes是独立作用域，不参与级联链。
常见错误现象：background-color: var(--bg);写在0%, 100%里，但动画跑出来是跳变，或者压根没变色。
- 变量必须绑定到一个**实际可动画的原生属性**上（如
color、transform、opacity），不能靠变量“间接驱动” - 如果想用变量控制颜色，得把
var(--bg)提前计算好，赋给background-color，再让这个原生属性进关键帧 - 不能在
@keyframes内部用style.setProperty()或JS改变量来触发重绘——那不是CSS动画，是JS驱动的逐帧更新
animation必须作用于设置了变量的元素本身
很多人把变量定义在:root，然后给子元素加animation，指望子元素动起来能带动变量变化——不行。变量值是静态继承的，动画触发时不会重新求值。
正确做法是：变量定义位置和动画作用目标必须是同一个元素，或至少该元素能通过级联拿到变量的**动态更新流**（比如用element.style.setProperty('--x', val)实时改）。
立即学习“前端免费学习笔记（深入）”；
- ✅ 可行：
div { --offset: 0px; animation: move 1s; } @keyframes move { to { --offset: 100px; transform: translateX(var(--offset)); } } - ❌ 不可行：
:root { --offset: 0px; } div { animation: move 1s; } @keyframes move { to { --offset: 100px; } }—— 这里--offset改了，但div没重算transform - 变量名要全程一致，大小写敏感，
--Offset和--offset是两个变量
用transform + calc()绕过颜色/背景动画限制
颜色、背景图这类不可直接插值的属性，无法靠变量+关键帧实现平滑过渡。但可以用间接方式模拟：把变量转成可动画的数值，再用calc()或hsl()函数生成目标值。
例如想让背景色从红渐变到蓝，又想用变量控制起点和终点：
div {
--hue-start: 0;
--hue-end: 240;
animation: hue-shift 2s infinite;
}
@keyframes hue-shift {
0% { --progress: 0; }
100% { --progress: 1; }
}
div::before {
content: "";
background: hsl(calc(var(--hue-start) + (var(--hue-end) - var(--hue-start)) * var(--progress)), 80%, 60%);
}注意：--progress是数值型变量，它本身可被关键帧驱动；hsl()在每次渲染时重新计算，所以视觉上是动画。
- 只适用于支持
calc()和函数式颜色（hsl(),rgb()）的现代浏览器 -
--progress必须是0~1之间的数，否则hsl()可能溢出或无效 - 性能比原生
background-color动画差，尤其大量元素时，每帧都要重解析CSS函数
JS配合才是真灵活方案
纯CSS做不到的（比如用变量控制贝塞尔曲线、响应式断点动画、条件切换），就得靠JS读取/修改变量，再触发重排或requestAnimationFrame。
典型场景：滚动时根据--scroll-y变量驱动视差动画。
- 用
element.animate()替代@keyframes，直接传入keyframes数组和timing，里面可以动态拼接transform: translateY(${val}px) - 监听
scroll事件，用el.style.setProperty('--scroll-y', window.scrollY + 'px')，再配合will-change: transform防卡顿 - 别在
scroll里直接改多个变量——合并为一次setProperty调用，减少样式无效计算
复杂点在于：CSS变量本身不触发重绘，只有它影响的原生属性变化才会。所以“变量动了”不等于“画面动了”，中间这层映射关系，得自己盯紧。
