css变量不能直接控制动画持续时间，必须通过animation-duration或transition-duration显式引用；@keyframes内不支持var()，浏览器会静默忽略整行；变量须定义在元素级样式中并带单位，且多动画时需严格对齐name与时长顺序。
CSS变量本身不能直接控制动画持续时间，必须通过 animation-duration 或 transition-duration 显式引用变量值才能生效。 单纯定义 --duration: 0.3s 不会让任何动画变慢或变快——浏览器根本不会“自动监听”变量变化并重绘动画。
为什么 var(--duration) 写在 @keyframes 里无效？
因为 @keyframes 块内不支持 var() 函数。浏览器会静默忽略整行声明，比如：
/* ❌ 这样写，transform 动画直接失效 */
@keyframes slide {
to { transform: translateX(var(--dist)); }
}
正确做法是把变量用在元素级样式上：
/* ✅ 正确：变量作用于 animation-duration */
.element {
--anim-duration: 0.45s;
animation: slide var(--anim-duration) ease-out;
}
关键点：
-
@keyframes中只允许常量、百分比、关键词（如from/to），不解析 CSS 变量 - 所有变量注入必须发生在元素规则层，而非动画定义层
- Safari 15.4 之前还不支持
cubic-bezier(var(--x1), ...)这类函数内嵌变量，需降级为固定值或 JS 注入
transition-duration 引用变量时的常见失效原因
最常踩的坑不是变量没定义，而是声明结构错位或单位缺失：
-
transition-duration: var(--transition-fast);→ 必须确保--transition-fast的值带单位，如0.18s，不能是0.18 - 只写
transition-duration没配transition-property→ 整条过渡规则被忽略，不是“没效果”，而是压根不注册 - 用
transition: all 0.3s;+var(--duration)→all会把box-shadow、border-color等低频属性也纳入过渡，引发意外重绘 - 变量改了但没更新对应元素的
transition声明 → 浏览器只认最终解析出的 CSS 值，变量更新不会触发已有 transition 重新绑定
多个动画共存时，animation-duration 如何与变量配合？
逗号分隔的多动画场景下，每个 animation-duration 必须严格对齐 animation-name 顺序：
.card {
--fade-time: 0.25s;
--slide-time: 0.4s;
animation: fade-in var(--fade-time), slide-up var(--slide-time);
}
注意：
- 顺序错一位（比如把
slide-up的时长写在fade-in后面）会导致整个animation声明失效 - 不能用
calc()动态算时长：animation-duration: calc(var(--base) * 1.5);在绝大多数浏览器中不被支持，且语义模糊 - JS 修改变量后动画没反应？先确认是否触发了重排（如修改
className或强制offsetHeight），否则浏览器可能跳过重绘
真正难的不是写对语法，而是让每个交互节奏都匹配用户预期：按钮悬停要快，模态框入场要稳，而这一切的前提是变量名有语义、声明位置不越界、单位不遗漏——漏掉任何一个，动画就只是“看起来像动了”，而不是“恰到好处地动”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
