css变量不能在@keyframes中直接插值，因规范禁止运行时求值；必须通过calc(var(--x))在元素上定义变量并引用，仅支持transform等可动画属性，safari 16.4+才稳定兼容。
CSS变量不能直接在@keyframes内部参与插值计算，这是浏览器规范层的硬限制，不是兼容性问题。 你写transform: translateX(var(--tx))在@keyframes里，整条声明会被静默忽略——动画不会报错，但会退回到默认行为（比如transform不生效、opacity卡在初始值）。
为什么@keyframes里用var()总不生效
根本原因是：CSS变量在@keyframes块内无法被解析为可插值数值。浏览器在解析关键帧时，要求所有值必须是静态、可预编译的；而var(--x)属于运行时求值，合成层无法将其纳入动画时间轴计算。
- 不是 Safari 或 Chrome 的 bug，Chrome 120+、Firefox 125、Safari 16.4 都一致执行该规范
- 即使变量已在
:root定义，@keyframes仍读不到——它不继承作用域，只认字面量 - 常见误判：看到开发者工具里“Computed”值正常，就以为生效了；其实那是元素样式层的计算结果，和关键帧实际执行无关
真正能动态控制的关键帧参数，只能靠calc() + 元素级变量
唯一可靠路径：把变量定义在动画触发的元素上（如div.skeleton），再在@keyframes中用calc()引用它。注意单位必须显式、数值必须无单位变量（避免calc(100% / var(--speed, 1.5s))这种带单位除法）。
- ✅ 正确写法：
calc(75% / var(--speed, 1.6))（--speed是纯数字，如1.6） - ✅ 同时确保
@keyframes中所有属性都属于可动画类型（transform、opacity、background-position等） - ⚠️ Safari 16.4 之前不支持
calc()在@keyframes中，旧版会降级为静态关键帧（如全按0%→100%走） - ❌ 禁止写
background-position: var(--pos, -200px) 0——这只会固定在首帧位置，不会动
animation属性本身怎么安全用变量
animation简写属性对变量极其敏感：任意一个子项变量未定义或类型错误，整条声明可能被丢弃（例如animation: shine var(--dur) ease中--dur为空，Chrome 直接忽略整个animation）。
- ✅ 推荐拆开写：
animation-name: shine;、animation-duration: var(--dur, 1.5s);、animation-timing-function: cubic-bezier(var(--x1, 0.25), var(--y1, 0.1), var(--x2, 0.25), var(--y2, 1)); - ✅ 所有
var()必须带默认值，否则未声明时animation-duration会变成0s，动画不播放 - ⚠️
animation-delay、animation-iteration-count等控制类属性虽支持变量，但 IE 完全不支持，需@supports兜底 - ❌ 不要用 JS 动态
insertRule拼@keyframes字符串——2026年主流框架已弃用此模式，性能差且难以调试
需要真正“动态关键帧”时，JS 是绕不开的
如果你要让光条宽度随屏幕尺寸实时变化、或根据数据密度调整扫光节奏，纯 CSS 无法做到。此时应由 JS 注入变量，并配合 CSS 变量驱动重绘：
- JS 控制：
el.style.setProperty('--tx', '120');→ 触发transform: translateX(calc(var(--tx) * 1px))重算 - 性能关键：避免频繁改影响 layout 的变量（如
--height），优先用transform+will-change: transform - 别指望改一次变量就重播动画：CSS 变量变更不触发
animation重置，需手动清空animation再恢复，或用class切换
最易被忽略的一点：所谓“动态关键帧”，本质是用 JS 模拟关键帧逻辑，CSS 只负责渲染。变量不是魔法，它只是把原本写死的数值，换成了由 JS 实时注入的接口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
