Как передать имя ключевого кадра CSS в качестве переменной? - PullRequest
Новая
       94

Как передать имя ключевого кадра CSS в качестве переменной?

1 голос
/ 02 августа 2020

У меня есть ключевой кадр 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 ОШИБКА, код отлично работает на Firefox image 

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

...