CSS关键帧中var()会被静态求值，无法响应变量动态变化；需通过重播动画或JS+requestAnimationFrame实现真动态效果。
关键帧里不能直接用 var() 读取动态更新的 CSS 变量
浏览器在解析 @keyframes 时会**静态求值**所有 var()，也就是说，动画开始前就固定了变量值，后续 JS 修改 --progress 或 --duration 不会影响正在播放的动画。这是最常被误解的一点——你以为改了变量就能“实时驱动动画”，其实它只生效于新启动的动画实例。
常见错误现象：element.style.setProperty('--rotate-speed', '20deg'); 后旋转没变快，因为 @keyframes spin { to { transform: rotate(var(--rotate-speed)); } } 里的 var(--rotate-speed) 在动画注册时就被解析成初始值（比如 10deg）并固化了。
- 必须用
animation属性本身控制节奏：比如通过 JS 动态设置element.style.animationDuration = '0.5s'或element.style.animationIterationCount = 'infinite' - 若想让动画“响应”变量变化，得重新触发：移除再添加 class、或调用
element.getAnimations().forEach(a => a.cancel());+element.style.animation = 'none';+ 强制重排（void element.offsetHeight;）+ 恢复动画 - 不要在
@keyframes内部写calc(var(--gap) * 2)—— 它同样会被静态求值，且 calc 表达式中变量未定义时整条声明失效
用 CSS 变量控制动画的起始/结束状态，而非中间过程
虽然关键帧内不能动态读取变量，但你可以把变量用在动画的「边界」上：比如用 --from-angle 和 --to-angle 控制 from 和 to 块，再让浏览器插值计算中间帧。这样变量更新后，只要重播动画，就能体现新值。
实操建议：
- 定义两套变量：
:root { --from-angle: 0deg; --to-angle: 360deg; } - 关键帧只引用它们：
@keyframes rotate-custom { from { transform: rotate(var(--from-angle)); } to { transform: rotate(var(--to-angle)); } } - JS 更新后重播：
el.style.animation = 'none'; void el.offsetWidth; el.style.animation = 'rotate-custom 1s ease-in-out'; - 注意：若变量值非法（如
--from-angle: invalid），整个from块会被忽略，动画从默认状态开始
替代方案：用 transform 内联样式 + requestAnimationFrame 实现真动态
当动画逻辑复杂、需每帧响应数据（如仪表盘指针随 API 数值跳动），CSS 关键帧就不够用了。此时应放弃 @keyframes，改用 JS 驱动的 transform 更新，配合 will-change: transform 保证性能。
示例场景：环形图指针角度随 percentage 实时变化
const needle = document.querySelector('.gauge-needle');
const updateNeedle = (percentage) => {
const angle = percentage * 360;
needle.style.setProperty('--gauge-angle', `${angle}deg`);
// 注意：这里只是设变量，真正驱动动画靠下面
needle.style.transform = `rotate(${angle}deg)`;
};
// 调用 updateNeedle(75) 即可，无需 keyframes
- 务必加
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);到 .gauge-needle 上，否则无缓动 - 避免高频调用：若数据每 10ms 更新一次，用
requestAnimationFrame节流，而不是直接塞进setInterval - 别试图用
element.animate()API 绑定 CSS 变量——它不监听变量变化，只接受初始值
容易被忽略的继承与作用域陷阱
CSS 变量在关键帧中不可动态更新，但它的作用域规则依然生效。如果 --speed 在某个父容器上定义，而动画元素不在其子树内（比如用 position: fixed 脱离文档流），那 var(--speed) 就会回退到 :root 的值或 undefined。
- 检查继承链：用浏览器 DevTools 的 Computed 面板看目标元素的
var(--x)最终解析值，确认它来自哪一层 - 不要依赖组件内部定义的局部变量驱动动画——Svelte 的
svelte-css-wrapper或 Vue 的 scoped style 会让变量无法穿透到@keyframes所在的作用域 - 全局动画参数统一放在
:root，用[data-theme="dark"] :root覆盖，避免因选择器优先级导致变量未生效
动画真正动态的地方不在关键帧里，而在你触发它的那一刻——变量改了，得让它“重来一遍”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
