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;
    }

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

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