可行但有严格限制：CSS变量不能在@keyframes内直接使用，须定义在动画触发元素上并用calc()等在属性值中引用；animation简写中嵌变量风险高，应拆分为单项绑定并设默认值。
用 --animation-duration 等 CSS 变量改关键帧参数，真的可行吗？
可行，但有严格限制：CSS 变量不能直接在 @keyframes 里被计算或插值，浏览器会忽略它们。你写 transform: translateX(var(--offset)); 在 @keyframes 内部，它不会生效——不是 bug，是规范行为。
真正能动态控制的路径只有一条：把变量定义在动画触发元素上，再用 calc() 或函数式写法在「动画属性值」中引用，避开 @keyframes 体内部。
- ✅ 正确姿势：变量设在元素上，
animation或单个动画属性（如animation-duration）绑定变量 - ❌ 错误姿势：在
@keyframes里写opacity: var(--fade);，这会被当成无效声明 - ⚠️ 注意兼容性：
animation-timing-function支持变量（如cubic-bezier(var(--x1), ...)），但 Safari 15.4 之前不支持函数内嵌变量
animation 属性里怎么安全地用 CSS 变量
直接把变量塞进 animation 简写里风险高——浏览器对简写中变量解析不一致，尤其当变量缺值或类型错时，整条声明可能被丢弃。稳妥做法是拆开写、逐项绑定。
- 推荐写法：
animation-duration: var(--dur, 0.3s); animation-timing-function: cubic-bezier(var(--x1, 0.25), var(--y1, 0.1), var(--x2, 0.25), var(--y2, 1)); - 避免写法：
animation: slide var(--dur) ease-in-out;—— 如果--dur未定义，整个animation可能失效 - 注意 fallback：所有变量都带默认值（如
var(--dur, 0.4s)），否则未声明变量会导致该属性退为初始值（比如animation-duration: 0s）
想让关键帧里的位移/缩放随 JS 动态变，绕不开 JS 吗？
纯 CSS 做不到。关键帧内容是静态解析的，变量无法穿透进去参与计算。但你可以用 JS 配合 CSS 变量“伪造”动态关键帧效果——本质是把原本写死在 @keyframes 里的数值，换成由 JS 注入的变量，再靠元素样式实时驱动。
- 典型模式：定义一个通用动画名（如
@keyframes slide-x），里面写transform: translateX(calc(var(--tx, 0) * 1px)); - JS 控制：
el.style.setProperty('--tx', '100');，触发动画重绘 - 性能提示：频繁改
--tx会触发 layout（如果依赖其他布局属性），优先用transform+will-change: transform缓解 - 别踩坑：不要用
insertRule动态拼@keyframes字符串——IE 不支持，且每次注入都会新建规则，内存和样式表体积不可控
为什么 calc(var(--n) * 1deg) 在 rotate 里有时不工作？
因为单位隐式转换失败。var(--n) 是无单位数字，calc(2 * 1deg) 合法，但 calc(var(--n) * 1deg) 要求 --n 的值本身必须带单位（如 --n: 2; ❌，--n: 2deg; ✅）才能参与乘法运算——这是 CSS calc 的类型规则，不是浏览器 bug。
- 正确写法（数值型变量）：
transform: rotate(calc(var(--rot, 45) * 1deg));—— 用1deg提供单位上下文 - 错误写法：
transform: rotate(calc(var(--rot) * 1deg));且--rot: 45;—— Chrome 会报Invalid property value - 更稳方案：JS 设置时就带单位，
el.style.setProperty('--rot', '45deg');，然后rotate(var(--rot))
最易被忽略的一点：CSS 变量值是字符串，但参与 calc 运算时，浏览器按类型推导。一旦某个环节单位缺失或冲突，整条声明静默失效，连 devtools 的 computed 面板都可能不显示该属性——得靠 Elements 面板里看 styles 是否被划掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
