为什么我不能动画自定义属性（也称为CSS变量）？

Question

看到这个动画：

• 黄金div有其中一个自定义属性动画动画 （@keyframes roll-o-1动画--o）。 该动画的步骤。
• 银div有其中一个正常的属性动画动画 （@keyframes roll-o-2动画left）。 这连续的动画。

为什么不金格动画顺利？ 有也使用变量什么解决办法？

#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>