css - 为什么我不能为自定义属性(又名 CSS 变量)设置动画？

Question

看这个动画:

金色 div 有一个动画，其中自定义属性被动画化
( @keyframes roll-o-1 动画 --o )。
这一步动画。

银色 div 有一个动画，其中一个普通属性被动画
( @keyframes roll-o-2 动画 left )。
这会连续动画。

为什么金色 div 动画不流畅？
是否有任何解决方法也使用变量？

#one {
  width: 50px;
  height: 50px;
  background-color: gold;
  --o: 0;
  animation: roll-o-1 2s infinite alternate ease-in-out both;
  position: relative;
  left: calc(var(--o) * 1px);
}

@keyframes roll-o-1 {
  0% {
    --o: 0;
  }
  50% {
    --o: 50;
  }
  100% {
    --o: 100;
  }
}

#two {
  width: 50px;
  height: 50px;
  background-color: silver;
  --o: 0;
  animation: roll-o-2 2s infinite alternate ease-in-out both;
  position: relative;
}

@keyframes roll-o-2 {
  0% {
    left: 0px;
  }
  50% {
    left: 50px;
  }
  100% {
    left: 100px;
  }
}

<div id="one"></div>
<br>
<div id="two"></div>

Answer 1

当被问到这个问题时，无法为自定义属性设置动画，正如@temani afif 正确指出的那样 -

since the UA has no way to interpret their contents

从此， CSS Houdini已经整理好了 CSS Properties and Values API specification

This specification extends [css-variables], allowing the registrationof properties that have a value type, an initial value, and a definedinheritance behaviour, via two methods:

A JS API, the registerProperty() method

A CSS at-rule, the @property rule

所以现在您可以注册自己的自定义属性 - 包括自定义属性的类型 - 动画自定义属性变得可能。
要通过 CSS 注册自定义属性 - 使用 @property规则

@property --o {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

#one {
  width: 50px;
  height: 50px;
  background-color: gold;
  --o: 0;
  animation: roll-o-1 2s infinite alternate ease-in-out both;
  position: relative;
  left: calc(var(--o) * 1px);
}

@keyframes roll-o-1 {
  0% {
    --o: 0;
  }
  50% {
    --o: 50;
  }
  100% {
    --o: 100;
  }
}

#two {
  width: 50px;
  height: 50px;
  background-color: silver;
  animation: roll-o-2 2s infinite alternate ease-in-out both;
  position: relative;
}

@keyframes roll-o-2 {
  0% {
    left: 0px;
  }
  50% {
    left: 50px;
  }
  100% {
    left: 100px;
  }
}

@property --o {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

<div id="one"></div>
<br>
<div id="two"></div>

要通过 javascript 注册属性 - 使用 CSS.registerProperty()方法:

CSS.registerProperty({
      name: "--o",
      syntax: "<number>",
      initialValue: 0,
      inherits: "false"
   });

CSS.registerProperty({
  name: "--o",
  syntax: "<number>",
  initialValue: 0,
  inherits: "false"
});

#one {
  width: 50px;
  height: 50px;
  background-color: gold;
  --o: 0;
  animation: roll-o-1 2s infinite alternate ease-in-out both;
  position: relative;
  left: calc(var(--o) * 1px);
}

@keyframes roll-o-1 {
  0% {
    --o: 0;
  }
  50% {
    --o: 50;
  }
  100% {
    --o: 100;
  }
}

#two {
  width: 50px;
  height: 50px;
  background-color: silver;
  animation: roll-o-2 2s infinite alternate ease-in-out both;
  position: relative;
}

@keyframes roll-o-2 {
  0% {
    left: 0px;
  }
  50% {
    left: 50px;
  }
  100% {
    left: 100px;
  }
}

<div id="one"></div>
<br>
<div id="two"></div>

NB
Browser support目前仅限于 chrome(v78+ 用于 registerProperty()，v85+ 用于 @property)边缘和歌剧