CSS анімація в середині циклу

Скажімо, у вас анімація, яка анімує елемент по всій ширині екрану. Від лівого до правого краю. Ви можете застосувати її до кількох елементів. Але, Ви не хочете, щоб всі елементи починали з однієї позиції.

Ви можете змінити animation-delay так, що анімування кожного елемента починалось в різний час, але місце початку анімації все-рівно буде однакове.

Проте, є вихід.

Фокус в тому, щоб використовувати негативне значення animation-delay. Це створить відчуття, ніби то частина анімації вже відбулась.

Маємо три елемента:

<div class="thing thing-1"></div>
<div class="thing thing-2"></div>
<div class="thing thing-3"></div>

Вони 300px в ширину. Ми збираємося анімувати їх по всьому екрану:

@keyframes moveAcross {
  0% {
    left: -300px;
  }
  100% {
    left: 100%;
  }
}

Всі вони використовують цю анімацію, що означає, що всі вони будуть починати з одного місця:

.thing {
  width: 300px;
  position: absolute;
  top: 0;
  left: 0;
  animation: moveAcross 10s linear infinite;
}

Застосовуємо негативні затримки:, щоб змінити їх стартову позицію:

.thing-1 {
  animation-delay: -1s;
}
.thing-2 {
  animation-delay: -2s;
}
.thing-3 {
  animation-delay: -3s;
}

Ще одна маленька хитрість: зупиніть анімацію для більш комфортного процесу налаштування (ви будете, по суті, побачивши перший кадр):

.car {
  ...
  animation-play-state: paused;
}

Краще всього, використовувати цей спосіб для повільних анімацій.

Різна тривалість:

See the Pen hjbKp by Chris Coyier (@chriscoyier) on CodePen.