Создание анимации с задержкой

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

Как создавать каскадные анимации с помощью sibling-index()

Используйте свойство sibling-index() в свойстве animation-delay, чтобы анимация каждого элемента была смещена на число, пропорциональное его положению в родительском элементе. Функция sibling-index() возвращает целое число, поэтому его необходимо умножить на единицу времени, чтобы преобразовать в значение времени.

#stagger-list > .item {
  --stagger-time: 0.1s;
  /* Define the animation first */
  animation: fade-in 0.4s;
  /* Set the `animation-delay` to a time multiplied by the `sibling-index()` */
  animation-delay: calc(sibling-index() * var(--stagger-time))
}

ОБЯЗАТЕЛЬНО. Учитывайте предпочтения пользователей, отключая анимацию для тех, кто предпочитает уменьшенное движение.

@media (prefers-reduced-motion: reduce){
  /* Disable animation for users who prefer reduced motion. */
  #stagger-list > .item {
    animation: none;
  }
}

Резервные стратегии

Проверьте поддержку sibling-index() с помощью CSS с @supports (animation-delay: calc(sibling-index() * 0.1s)){} или JavaScript с !CSS.supports('animation-delay: calc(sibling-index() * 0.1s)').

Чтобы обеспечить поддержку каскадной анимации в старых браузерах, используйте JavaScript для добавления дополнительного параметра --sibling-index к каждому дочернему элементу. ОБЯЗАТЕЛЬНО: оберните этот код в проверку CSS.supports('animation-delay: calc(sibling-index() * 0.1s)'), чтобы не запускать ненужный код JavaScript.

if(!CSS.supports('animation-delay: calc(sibling-index() * 0.1s)')){
  const staggerList = document.getElementById('stagger-list');
  [...staggerList.children].forEach((el, index)=>el.style.setProperty('--sibling-index', index + 1));
}

Добавьте объявление animation-delay, в котором используется специальное свойство --sibling-index. Она должна находиться перед объявлением animation-delay, в котором используется функция sibling-index(). Его не нужно заключать в @supports – старые браузеры не будут анализировать второе объявление и будут использовать первое.

#stagger-list > .item {
  animation-delay: calc(var(--sibling-index) * var(--stagger-time));
  animation-delay: calc(sibling-index() * var(--stagger-time));
}