У меня есть элемент 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;
    }
  }

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

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

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

0
Lebron James 28 Окт 2019 в 10:39

2 ответа

Лучший ответ

Рассмотрим переменную 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>
1
Temani Afif 28 Окт 2019 в 09:58

Сокращенно-синтаксис свойства CSS-анимации:

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

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

animation: popit 5s linear infinite forwards;
-1
Vishnu Baliga 28 Окт 2019 в 07:48
58587172