Как использовать анимацию на повернутом элементе в CSS

Question

У меня есть элемент div, который по умолчанию повернут на 90 градусов. Теперь я хочу применить анимационный эффект к нему по клику. Есть ли способ сохранить эффект вращения на протяжении всей жизни анимации?

Когда я использовал анимацию, я смог определить CSS-эффект для 0%, 50% и 100% срока службы анимации. Но у элемента есть случайный шанс поворота на 90 или -90 градусов, я не могу поместить жестко закодированное вращение в определение ключевых кадров.

<div class="solid clock ani">&#10004;</div>
<div class="solid counterclock ani">&#10004;</div>

.solid {width:50px; height:50px}
.clock {transform: rotate(90deg)} /*clock-wise rotation*/
.counterclock {transform: rotate(-90deg)} /*counter-clock-wise rotation*/
.ani {animation popit 0.2s linear 1 forwards} /*does not preserve rotation!!*/

@keyframes popit{
    0% {
      width: 0%;
      height: 0%;
      opacity: 0;
      border-radius: 50%;
    }
    50% {
      width: 150%;
      height: 150%;
      transform: translateX(-10%);
      border-radius: 50%;
      opacity: 1;
    }
    100% {
      width: 100%;
      height: 100%;
      opacity: 1;
    }
  }

Я хотел бы посмотреть, есть ли способ динамическидобавьте вращение в определение ключевых кадров, приведенное выше

С помощью приведенного выше кода элемент повернется обратно в исходное положение, применит анимацию и затем повернет на 90 градусов.

В идеале я хочу, чтобы элементвращайся всю жизнь анимации.

Answer 1

Рассмотрим переменную CSS для добавления вращения внутри анимации:

.solid {
  width: 50px;
  height: 50px;
  display:inline-block;
  border:1px solid red;
}

.clock {
  transform: rotate(90deg);
  --d:90deg;
}

/*clock-wise rotation*/

.counterclock {
  transform: rotate(-90deg);
  --d:-90deg;
}


/*counter-clock-wise rotation*/

.ani {
  animation: popit 5s linear 1 forwards;
}


/*does not preserve rotation!!*/

@keyframes popit {
  0% {
    opacity: 0;
    border-radius: 50%;
  }
  50% {
    transform: translateX(-10%) rotate(var(--d,0deg));
    border-radius: 50%;
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

<div class="solid clock ani">&#10004;</div>
<div class="solid counterclock ani">&#10004;</div>

Answer 2

Синтаксис свойства анимации CSS:

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

Таким образом, в вашем случае вы можете определить его как:

animation: popit 5s linear infinite forwards;