Como criar uma animação escalonada

As animações escalonadas oferecem um efeito interessante em que vários elementos ordenados são animados sequencialmente com um pequeno atraso entre cada um, em vez de todos serem animados de uma vez. Essa técnica é frequentemente usada em listas, galerias ou menus de navegação para guiar o olhar do usuário e adicionar uma sensação rítmica e refinada às interações.

Animações escalonadas com sibling-index()

Use a propriedade sibling-index() na propriedade animation-delay para que a animação em cada elemento seja deslocada por um número proporcional à posição no elemento pai. A função sibling-index() retorna um número inteiro, então precisa ser multiplicada por uma unidade de tempo para ser convertida em um horário.

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

OBRIGATÓRIO: respeite as preferências do usuário desativando a animação para quem prefere movimento reduzido.

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

Estratégias de fallback

Teste a compatibilidade com sibling-index() usando CSS com @supports (animation-delay: calc(sibling-index() * 0.1s)){} ou JavaScript com !CSS.supports('animation-delay: calc(sibling-index() * 0.1s)').

Para oferecer suporte a animações escalonadas em navegadores mais antigos, use o JavaScript para adicionar uma propriedade personalizada --sibling-index a cada elemento irmão. OBRIGATÓRIO: envolva isso em um teste CSS.supports('animation-delay: calc(sibling-index() * 0.1s)') para evitar a execução de JavaScript desnecessário.

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

Adicione uma declaração animation-delay que use a propriedade personalizada --sibling-index. Ela precisa estar antes da declaração animation-delay que usa a função sibling-index(). Não é necessário usar @supports. Os navegadores mais antigos não vão analisar a segunda declaração e vão usar a primeira.

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