How to add 2 classes in turn (React)?

Question

css

I want to implement a function that, when clicked, adds several classes to an element, but does it not all at once, but each class in turn (that is, with a time interval).
I roughly understand how to do this, I use special conditions for if using setTime, but so far, unfortunately, I have not reached the desired result.
Example:
There is an element with class .block

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

and let's say 2 classes .first and .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);
}

when clicking on an element with the .block class , the .first class would be added first , and then, after 3 seconds, the .second class would be added

Answer 1

For this kind of tasks, there is @keyframes