css变量不能直接存储cubic-bezier()字符串，必须拆分为四个独立数值变量（如--ease-x1: 0.42），再在cubic-bezier()中用var()引用；预设类可封装逗号分隔的四值组合提升复用性。
如何用 CSS 变量定义 cubic-bezier() 值
CSS 自定义属性（变量）本身不能直接参与函数解析，--ease-custom: cubic-bezier(0.42, 0, 0.58, 1); 这种写法看似合理，但实际无效——浏览器会把整个值当字符串存起来，后续在 transition-timing-function 或 animation-timing-function 中引用时，不会自动解析为有效缓动函数。
真正可行的方式是：把 cubic-bezier() 的四个数值拆成独立变量，再在使用处拼接调用。
--ease-x1: 0.42;--ease-y1: 0;--ease-x2: 0.58;--ease-y2: 1;
然后这样用：transition-timing-function: cubic-bezier(var(--ease-x1), var(--ease-y1), var(--ease-x2), var(--ease-y2));
为什么不能直接用单个变量存完整 cubic-bezier() 字符串
因为 CSS 函数（如 cubic-bezier()、rgb()、url()）的参数必须是可计算的数值或关键字，而变量插值发生在属性值解析阶段，不触发函数重解析。一旦你把 cubic-bezier(...) 当作字符串赋给 --easing，它就只是文本，不是可执行的函数表达式。
常见错误现象：
- 写成
transition-timing-function: var(--easing);→ 浏览器报invalid property value - 控制台显示该声明被划掉，DevTools 显示“Invalid timing function”
- 动画退回到
ease默认行为，毫无察觉
兼容性与运行时限制要注意什么
这种拆参数 + 拼函数的写法在所有支持 CSS 变量和 cubic-bezier() 的浏览器中都可用（Chrome 49+、Firefox 31+、Safari 9.1+），但有两个硬性约束：
- 四个变量值必须是合法数字（支持小数、百分数、无单位数值），不能是
calc()表达式嵌套（例如var(--x1) + 0.1不允许出现在函数参数里） - 不能在
@keyframes内部动态修改这些变量并期望动画曲线实时更新——CSS 动画的 timing-function 是在动画启动时一次性求值的，变量后续变化不影响正在运行的动画 - 若需运行时切换缓动，得靠 JS 修改元素的
style.transitionTimingFunction或替换 class 触发重排
实用技巧：用预设类封装常用缓动组合
避免每次手动写四组变量，可以提前定义好几套常用组合：
html {
--ease-in-quad: 0.55, 0.085, 0.68, 0.53;
--ease-out-quad: 0.25, 0.46, 0.45, 0.94;
--ease-in-out-cubic: 0.645, 0.045, 0.355, 1;
}
然后统一用：
.card:hover { transition-timing-function: cubic-bezier(var(--ease-in-out-cubic)); }
注意：这里 cubic-bezier(var(--ease-in-out-cubic)) 能工作，是因为 --ease-in-out-cubic 的值是逗号分隔的四个数字（不含括号），CSS 解析器会将其展开后整体传入函数——这是唯一能“伪简写”的方式，本质仍是参数展开，不是字符串解析。
最易被忽略的一点：变量名里带连字符（如 --ease-in-quad）没问题，但值里绝不能有多余空格或换行；否则逗号分隔失效，浏览器只取第一个数，其余被丢弃。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
