如何在CSS变量中定义复杂的缓动函数（Easing）？-css教程-PHP中文网

css变量不能直接存储cubic-bezier()字符串，必须拆为四个独立数值变量并在函数内逐个引用；因浏览器将--ease: cubic-bezier(...)视为纯文本而非可执行函数，导致transition-timing-function中var(--ease)被静默忽略并回退到ease。

如何在css变量中定义复杂的缓动函数（easing）？

CSS变量不能直接存cubic-bezier()字符串，必须拆成四个独立数值变量再拼接使用。

为什么`var(--ease)`在`transition-timing-function`里会失效

浏览器把--ease: cubic-bezier(0.42, 0, 0.58, 1);当纯文本存储，不是可执行函数；transition-timing-function: var(--ease);会被静默忽略，DevTools 显示划掉该行，并回退到ease。

常见错误现象：Invalid property value或控制台无报错但动画不按预期走
根本原因：CSS 函数参数必须在属性值解析阶段就为可计算值，变量插值不触发函数重解析
所有现代浏览器（Chrome 49+、Firefox 31+、Safari 9.1+）行为一致，不是兼容性问题，而是规范限制

正确写法：把`cubic-bezier()`四参数拆成独立变量

定义时分开存 x1、y1、x2、y2，使用时在函数内逐个var()引用：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

:root {
  --ease-x1: 0.42;
  --ease-y1: 0;
  --ease-x2: 0.58;
  --ease-y2: 1;
}

.card {
  transition-timing-function: cubic-bezier(
    var(--ease-x1),
    var(--ease-y1),
    var(--ease-x2),
    var(--ease-y2)
  );
}

x1和x2必须落在[0, 1]区间，否则整个cubic-bezier()声明被拒绝
y1和y2可超出[0, 1]（如-0.55或1.55），这是实现弹性“超调”的关键
若需复用多组曲线，建议用语义化前缀区分：--bounce-x1、--spring-y2等

替代方案：用`@keyframes`绑定动画名间接变量化

当需要在多个元素间切换不同缓动曲线，又不想重复写四组数值时，可把曲线绑定到命名动画，再用变量控制animation-name：

@keyframes ease-bounce {
  0% { transform: scale(0.9); }
  100% { transform: scale(1); }
}
@keyframes ease-spring {
  0% { transform: scale(0.8); }
  100% { transform: scale(1.05) scale(0.95) scale(1); }
}

.element {
  animation-name: var(--anim-type, ease-bounce);
  animation-duration: 0.3s;
}