如何在CSS变量中定义复杂的缓动曲线_通过cubic-bezier变量名-css教程-PHP中文网

css变量不能直接用于transition-timing-function的cubic-bezier()函数中，需将四参数拆为独立变量并分别引用；x坐标须在[0,1]内，y可超范围实现弹性效果；或用@keyframes绑定动画名间接变量化。

如何在css变量中定义复杂的缓动曲线_通过cubic-bezier变量名

var(--ease) 直接用在 transition-timing-function 会失效

浏览器不解析 CSS 变量值中的函数调用，--ease-bounce: cubic-bezier(0.17, 0.89, 0.32, 1.28); 这种写法看似合理，但 transition-timing-function: var(--ease-bounce); 实际无效——DevTools 会划掉该声明，并静默回退到 ease。这是因为变量只是字符串替换，而 cubic-bezier() 必须在属性值位置原生出现才能被识别为合法缓动语法。

cubic-bezier() 的四个参数必须拆成独立变量

可行方案是把 x1、y1、x2、y2 分别定义为单独的 CSS 变量，再在函数中用 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)
  );
}

y 坐标可超出 [0,1] 范围（如 -0.55 或 1.55），这是实现弹性“超调”的关键
x 坐标必须落在 [0,1] 内，否则整个 cubic-bezier() 声明会被浏览器拒绝
所有现代浏览器（Chrome 49+、Firefox 31+、Safari 9.1+）都支持这种写法

用 @keyframes + animation 名间接“变量化”缓动

如果需要在多个地方切换不同曲线，又不想重复写四组数值，可以绑定曲线到命名动画，再用变量控制动画名：

@keyframes ease-bounce {
  0% { opacity: 0.99; }
  100% { opacity: 1; }
}
@keyframes ease-spring {
  0% { opacity: 0.99; }
  100% { opacity: 1; }
}
.element {
  animation: var(--anim-name, ease-bounce) 0.3s forwards;
}