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

Question

我有一个 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;
  }

它不会抛出错误或任何类型的线索来调查，哪个是错误？

更新： 我添加了完整的代码，删除标记的行来打破它。

正如我所提到的，我这样做animation-duration并且效果很好，但是计算时间更复杂，而是创建具有必要时间的新关键帧（我有五个关键帧）。

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

      @keyframes first {
        0%, 100% {
          opacity: 0;
          transform: scale(0) rotate(0deg);
        }
        20%, 99% {
          opacity: 1;
          transform: scale(1) rotate(180deg);
        }
      }
      
      @keyframes second {
        0%, 20%, 100% {
          opacity: 0;
          transform: scale(0) rotate(0deg);
        }
        40%, 99% {
          opacity: 1;
          transform: scale(1) rotate(180deg);
        }
      }
      
       #circle,
      #cross,
      #square,
      #triangle {
        opacity: 0;
      }

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

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

    <div style="background-color: aliceblue">
      <svg viewBox="-20 -20 600 200" id="main">
        <defs id="test">

          <rect width="80" height="80" id="circle" fill="red" />
          <rect width="80" height="80" id="square" fill="pink" />
          <rect width="80" height="80" id="cross" fill="blue" />
          <rect width="80" height="80" id="triangle" fill="green" />
        </defs>

        <g id="load-area">
          <use x="0" xlink:href="#circle" />
          <use x="100" xlink:href="#square" />
          <use x="200" xlink:href="#cross" />
          <use x="300" xlink:href="#triangle" />
        </g>
      </svg>
    </div>

标签： csscss-variables