Tworzenie animacji kaskadowej

Funkcje internetowe: sibling-count() i sibling-index()

Animacje kaskadowe dają ciekawy efekt, w którym wiele uporządkowanych elementów jest animowanych sekwencyjnie z niewielkim opóźnieniem między nimi, a nie wszystkie naraz. Ta technika jest często używana na listach, w galeriach lub menu nawigacyjnym, aby przyciągnąć wzrok użytkownika i nadać interakcjom dopracowany, rytmiczny charakter.

Kaskadowe animacje z sibling-index()

Użyj właściwości sibling-index() we właściwości animation-delay, aby animacja każdego elementu była przesunięta o liczbę proporcjonalną do jego pozycji w elemencie nadrzędnym. Funkcja sibling-index() zwraca liczbę całkowitą, więc należy ją pomnożyć przez jednostkę czasu, aby przekonwertować ją na czas.

#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))
}

OBOWIĄZKOWO: szanuj preferencje użytkowników, wyłączając animację dla użytkowników, którzy wolą ograniczyć ruch. 

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

Strategie zastępcze

Sprawdź obsługę sibling-index() za pomocą CSS z @supports (animation-delay: calc(sibling-index() * 0.1s)){} lub JavaScriptu z !CSS.supports('animation-delay: calc(sibling-index() * 0.1s)').

Aby obsługiwać animacje kaskadowe w starszych przeglądarkach, użyj JavaScriptu, aby dodać właściwość niestandardową --sibling-index do każdego elementu nadrzędnego. OBOWIĄZKOWO: umieść to w teście CSS.supports('animation-delay: calc(sibling-index() * 0.1s)'), aby uniknąć uruchamiania niepotrzebnego kodu 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));
}

Dodaj deklarację animation-delay, która używa właściwości niestandardowej --sibling-index. Musi znajdować się przed deklaracją animation-delay, która używa funkcji sibling-index(). Nie trzeba tego umieszczać w @supports – starsze przeglądarki nie będą analizować drugiej deklaracji i użyją pierwszej.

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