关键帧内禁止直接使用var(--x)，必须用calc(var(--x))且变量需定义在目标元素或其可继承祖先上；animation-duration和delay可直用var()；动态关键帧需js注入。
关键帧内部不能用 var(--x)，这是规范限制，不是兼容性问题
浏览器在解析 @keyframes 块时，会直接忽略所有 var(--x) 声明——Chrome 120+、Firefox 125、Safari 16.4+ 全部一致执行该规则。你写的 100% { transform: translateX(var(--dist)); } 看似合理，实际整行被丢弃，动画可能卡在初始状态，或退化为无变化。开发者工具里“Computed”显示正常，但“Animation”面板看不到该帧生效，就是典型症状。
calc(var(--x)) 是唯一能进关键帧的合法写法，但必须配合元素级变量定义
想让位移、缩放等数值响应变量，只能走 calc() 这条路径，且有三个硬性前提：
- 变量必须定义在触发动画的元素上（如
.item { --dist: 200px; }）或其可继承祖先（如:root或.list），不能只在@keyframes外部声明却未挂载到目标节点 -
calc(var(--dist))中的括号不能省，calc(var(--dist) * 1px)比calc(var(--dist) px)更稳妥 - 务必提供 fallback：
calc(var(--dist, 100) * 1px)，否则变量未设时整个值退为0
示例：
:root {
--dist: 150px;
}
@keyframes slide {
0% { transform: translateX(0); }
100% { transform: translateX(calc(var(--dist, 150) * 1px)); }
}
.box { animation: slide 0.4s ease; }
真正能动态响应的只有 animation-duration 和 animation-delay
这两个属性支持直接 var(--dur)，无需 calc() 包裹，浏览器在渲染时实时求值，重绘成本低，兼容性也远好于关键帧内用 calc()：
- 正确：
animation-duration: var(--dur, 0.3s);、animation-delay: calc(var(--delay, 0) * 1s); - 错误：
animation: slide var(--dur) ease;—— 简写中缺值（如没写 iteration-count）会导致整条声明失效 - 媒体查询中可覆盖变量：
@media (prefers-reduced-motion) { :root { --dur: 0.01s; } }，但需提前测试是否触发重绘
需要逐帧动态生成？JS 注入是唯一出路
如果业务要求每个元素的关键帧数量、百分比位置、甚至属性值都运行时决定（比如粒子系统每帧坐标不同），CSS 变量 + calc() 依然不够用——因为 @keyframes 本身是静态规则，无法响应 DOM 变化。此时必须用 JS 动态构造样式字符串并注入 <style></style>：
- 用
document.styleSheets[0].insertRule(...)或创建新<style></style>标签 - 关键帧名建议带哈希后缀（如
slide-abc123）避免冲突 - 注意 Safari 15.4 之前不支持
calc()在@keyframes中，旧环境需降级为固定值
变量控制动画进度这件事，本质是分层的：动画节奏（时长/延迟）可变量驱动，动画形态（关键帧数值）只能靠 calc() 间接透传，而动画结构（帧数/分布）必须交由 JS 掌控。漏掉任一层的约束，都会导致预期失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
