如何将CSS关键帧名称作为变量传递？

我有一个css动画关键帧：

  @keyframes first-movement {
    0%, 100% {
      opacity: 0;
      transform: scale(0) rotate(0deg);
    }
    20%, 99% {
      opacity: 1;
      transform: scale(1) rotate(180deg);
    }
  }

当我把它当作普通的东西使用时，一切都很好

  rect {
    animation-name: first-movement;
    animation-timing-function: linear;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    transform-origin: 40px 40px;
  }

但是当我尝试以CSS-var的形式发送时，它不起作用

  rect {
    animation-name: var(--main-animation);
    animation-timing-function: linear;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    transform-origin: 40px 40px;
  }

这就是我分配var的方法

  #load-area > use:nth-child(1) {
    --main-animation: first-movement;
  }

它不会抛出错误或任何要调查的线索，哪一个是错误

更新： 我添加完整代码，删除标记行以打断它

正如我所提到的，我使用

动画持续时间

来实现这一点，它工作得非常完美，但计算时间更为复杂，相反，我使用必要的计时来创建新的关键帧（我有五个关键帧）

更新2： 这是一个Chrome BUG，代码在Firefox上运行得非常完美

@先设置关键帧{
0%, 100% {
不透明度：0；
变换：缩放（0）旋转（0度）；
}
20%, 99% {
不透明度：1；
变换：缩放（1）旋转（180度）；
}
}
@关键帧秒{
0%, 20%, 100% {
不透明度：0；
变换：缩放（0）旋转（0度）；
}
40%, 99% {
不透明度：1；
变换：缩放（1）旋转（180度）；
}
}
#圆圈，
#十字架，
#广场，
#三角{
不透明度：0；
}
直肠{
动画名称：var（--主动画）；
动画计时功能：线性；
动画持续时间：8秒；
动画迭代次数：无限；
变换原点：40px 40px；
}
#加载区域>使用：第n个子项（1）{
--主要动画：第一；
}
#加载区域>使用：第n个子项（1）{
--主动画：第二；
}

您可能正在调用var（--main animation），其中--main animation没有定义。您可以共享一个完整的示例吗？您可以共享html的相关部分吗？这与以下内容有关：它适用于SVG，它与

动画持续时间

完美配合，但与

动画名称

不配合，它似乎是一个chrome bug，在firefox上运行良好您可能正在调用var（--main animation），其中未定义--main animation。您可以共享完整示例吗？您可以共享html的相关部分吗？这与以下相关：它用于SVG，它与

动画持续时间

完美配合，但与

动画名称

不配合。这似乎是一个chrome bug，在firefox上可以正常工作