Как правильно делать обратный transition delay?

Question

[Сергей Шилов]

Суть простая: на этом примере красный шар имеет задержку, поэтому сдвигается вправо он последний, но вот обратно он должен начать двигаться первым, а зеленый вторым, то есть они должны поменять значения задержки.

Вчера весь вечер лазил, пытался изучить этот вопрос, способов очень много, но мне надо исходить из моего примера

Answer 1

[0xD34F]

<div class="box">
  <div class="inbox1"></div>
  <div class="inbox2"></div>
</div>

.box {
  display: flex;
}

.inbox1,
.inbox2 {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  transition: all 800ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.inbox1 {
  background: red;
  transition-delay: 0ms;
}

.inbox2 {
  background: green;
  transition-delay: 200ms;
}

.box:hover .inbox1 {
  transform: translate(200px, 0);
  transition-delay: 200ms;
}

.box:hover .inbox2 {
  transform: translate(200px, 0);
  transition-delay: 0ms;
}

Comments

[Сергей Шилов]

Спасибо!