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

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

Вчера весь вечер лазил, пытался изучить этот вопрос, способов очень много, но мне надо исходить из моего примера
  • Вопрос задан
  • 187 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега CSS
<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;
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы