Последовательная анимация linear() с N элементами

Статья описывает инновационный подход к созданию последовательной анимации для N элементов с использованием современных функций CSS, таких как linear(), sibling-index() и sibling-count(). Традиционно такая задача требовала сложных ключевых кадров и утомительных расчетов задержек, что делало ее трудномасштабируемой, однако новые возможности CSS решают эту проблему элегантно для любого количества элементов. На данный момент функции sibling-index() и sibling-count() поддерживаются преимущественно в браузерах на движке Chromium (Chrome и Edge), но ожидается их расширенная поддержка.

Ключевым компонентом решения является функция linear(), которая, в отличие от стандартной animation-timing-function: linear, позволяет определять множество контрольных точек для прогресса анимации относительно времени, давая беспрецедентный контроль. Это позволяет анимировать элемент вперед и назад, а также создавать "задержки" в рамках одной анимации, например, linear(0 0%, 0 50%, 1 100%) создает паузу в первой половине. Основная идея последовательной анимации заключается в том, что все элементы используют одинаково простые ключевые кадры, но каждый элемент имеет уникальную функцию linear(), динамически рассчитываемую.

Для N элементов каждый элемент анимируется в течение 100%/N от общего цикла анимации, а остальное время "ждет". Старт (S) и конец (E) активной фазы анимации для каждого элемента определяются динамически с помощью функций sibling-index() (индекс элемента) и sibling-count() (общее количество элементов) следующим образом:

--_s: calc(100%*(sibling-index() - 1)/sibling-count());
--_e: calc(100%*(sibling-index())/sibling-count());

Эти переменные затем используются в функции linear() для свойства animation, где var(--d) контролирует длительность анимации для одного элемента:

animation: x calc(var(--d)*sibling-count()) infinite linear(0, 0 var(--_s), 1, 0 var(--_e), 0);

При этом анимация x остается предельно простой:

@keyframes x {
  to {
    background: #F8CA00;
    scale: .8;
  }
}

Такой подход позволяет создавать сложные последовательные анимации без ручного изменения ключевых кадров или добавления многочисленных задержек. Это значительно упрощает поддержку и масштабирование, а также дает возможность создавать более сложные вариации, например, с перекрывающимися анимациями, путем точной настройки контрольных точек linear(). Важно отметить, что для корректной работы может потребоваться регистрация CSS-переменных с помощью @property. В заключение, функция linear(), особенно в сочетании с новыми возможностями CSS, открывает огромный потенциал для создания динамичных и сложных анимационных эффектов.

Оригинал статьи: Sequential linear() Animation With N Elements