Как модифицировать анимацию с циклами?

Question

[DeniSidorenko]

Добрый день, есть такая анимация на codepen
CodePen

Так вот , там блоки действуют по такому принципу. Поднимается первый и отпускается, потом подключается второй к нему, потом третий. А мне надо что бы каждый из них по одному поднимался. Т.е если второй начал анимацию, то поднимается только он но без других. Надо что бы анимацию каждый делал поочередно.Не очень хорошо объяснил но если посмотрите CodePen сразу поймете что я имею ввиду.

Answer 1

[Ivan Bogachev]

Надо что бы анимацию каждый делал поочередно

.header-icon {
  animation: mymove 3s linear infinite;
  animation-fill-mode: forwards;
}

.header-icon.two{
  animation-delay: 1s;
}

.header-icon.three{
  animation-delay: 2s;
}

@keyframes mymove {
  0%   { transform: translateY(0);     }
  15%  { transform: translateY(-60px); }
  33%  { transform: translateY(0);     }
  100% { transform: translateY(0);     }
}

Comments

[DeniSidorenko]

Иван спасибо тебе большое, я уже измучился искать а ты сделал такой простой код)) Огромное спасибо