Как добавить 2 класса по очереди (React)?

Question

[Kerhin]

Хочу реализовать функцию, которая при клике добавляет элементу несколько классов, но делает это не разом, а каждый класс по очереди (то есть с временным промежутком).

Как это сделать я примерно понимаю, использую специальные условия для if с применением setTime, но пока желаемого результата к сожалению не достиг.

Пример:
Есть элемент с классом .block

<div>
  <div className="block">
</div>

и допустим 2 класса .first и .second

.block {
  position: absolute;
  top: 0;
  width: 50px;
  height: 20px;
  background-color: #fff;
  border-radius: 10px;
  transition: all .5s;
}

.first {
  top: 60px;
}
.second {
  transform: rotate(45deg);
}

при клике по элементу с классом .block сначала добавлялся бы класс .first, а после допустим через 3 секунды класс .second

Answer 1

[Антон Спирин]

Для подобного рода задач существует @keyframes

Comments

[Kerhin]

Я понимаю, что для этого есть @keyframes, но к сожалению я не понимаю как это реализовать так, чтобы анимация выполнялась по шагово, а не сразу. Использовал steps'ы на они делают анимацию дерганой и лишают ее плавности даже если использовать transition.

[Антон Спирин]

Kerhin, пример