在 @keyframes 中使用 CSS 变量，需要在 @keyframes 内部引用这些变量。 直接使用变量名即可，前提是这些变量已经在你的 CSS 样式表中定义。
以下是一些例子，展示了如何在 @keyframes 中有效地使用 CSS 变量：
方法一：直接在 @keyframes 中使用变量
这是最直接的方法，假设你已经定义了 CSS 变量：
:root {--animation-color: blue;--animation-duration: 2s;
}.my-element {animation: myAnimation var(--animation-duration) linear;
}@keyframes myAnimation {0% {background-color: var(--animation-color);left: 0;}100% {background-color: red;left: 100px;}
}
在这个例子中，--animation-color 和 --animation-duration 分别控制动画的颜色和持续时间。 你可以通过修改 :root 中的变量值来改变动画效果。
方法二：使用变量控制多个属性
你可以使用 CSS 变量来控制多个动画属性：
:root {--animation-color: blue;--animation-size: 50px;
}.my-element {animation: myAnimation 2s linear;width: var(--animation-size);height: var(--animation-size);
}@keyframes myAnimation {0% {background-color: var(--animation-color);transform: scale(1);}50% {background-color: red;transform: scale(1.5);}100% {background-color: var(--animation-color);transform: scale(1);}
}
这里，--animation-color 控制背景颜色，--animation-size 控制元素的尺寸。
方法三：在 JavaScript 中动态修改 CSS 变量
你也可以通过 JavaScript 动态修改 CSS 变量的值，从而实时改变动画效果：
document.documentElement.style.setProperty('--animation-color', 'green');
这行代码会将 --animation-color 的值改为绿色，从而影响动画效果。
重要提示:
- 变量作用域: 确保你的 CSS 变量在
@keyframes能够访问到的作用域内定义。 通常在:root中定义的变量全局可用。 - 浏览器兼容性: CSS 变量的浏览器兼容性非常好，但为了确保兼容性，最好进行测试。
- 变量名: 选择有意义的变量名，方便理解和维护代码。
通过这些方法，你可以灵活地使用 CSS 变量来控制 @keyframes 动画，使你的代码更简洁、可维护和易于修改。 记住根据你的具体需求选择最合适的方法。
