当前位置：首页 > 文章列表 > 文章 > 前端 > CSS变量与关键帧动画结合使用，可以实现更灵活和动态的动画效果。通过将变量作为动画属性值的一部分，可以在不同动画阶段中动态改变样式，提升代码的可维护性和扩展性。1.定义CSS变量首先，在:root或某个选择器中定义变量，例如：:root{--size:100px;--color:#ff0000;}2.在关键帧动画中使用变量可以直接在@keyframes中使用变量，或者在动画属性中引用变量。示例：使

CSS变量与关键帧动画结合使用，可以实现更灵活和动态的动画效果。通过将变量作为动画属性值的一部分，可以在不同动画阶段中动态改变样式，提升代码的可维护性和扩展性。1.定义CSS变量首先，在:root或某个选择器中定义变量，例如：:root{--size:100px;--color:#ff0000;}2.在关键帧动画中使用变量可以直接在@keyframes中使用变量，或者在动画属性中引用变量。示例：使

2026-03-21 08:36:44 0浏览收藏

关键帧里直接用`--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变量本身不触发重绘，只有它影响的原生属性变化才会。所以“变量动了”不等于“画面动了”，中间这层映射关系，得自己盯紧。

今天关于《CSS变量与关键帧动画结合使用，可以实现更灵活和动态的动画效果。通过将变量作为动画属性值的一部分，可以在不同动画阶段中动态改变样式，提升代码的可维护性和扩展性。1.定义CSS变量首先，在:root或某个选择器中定义变量，例如：:root{--size:100px;--color:#ff0000;}2.在关键帧动画中使用变量可以直接在@keyframes中使用变量，或者在动画属性中引用变量。示例：使用变量控制元素大小@keyframesgrow{0%{width:var(--size);height:var(--size);}100%{width:calc(var(--size)*2);height:calc(var(--size)*2);}}.box{animation:grow2sinfinite;}在这个例子中，--size可以通过JavaScript动态修改，从而影响动画的起始和结束尺寸。示例：使用变量控制颜色变化@keyframescolorChange{0%{background-color:var(--color);}50%{background-color:#00ff00;》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！