Creazione di un'animazione sfalsata

Le animazioni sfalsate offrono un effetto interessante in cui più elementi ordinati vengono animati in sequenza con un leggero ritardo tra l'uno e l'altro, anziché tutti contemporaneamente. Questa tecnica viene spesso utilizzata in elenchi, gallerie o menu di navigazione per guidare lo sguardo dell'utente e aggiungere un tocco ritmico e raffinato alle interazioni.

Scagliona le animazioni con sibling-index()

Utilizza la proprietà sibling-index() nella proprietà animation-delay in modo che l'animazione di ogni elemento venga compensata di un numero proporzionale alla sua posizione nell'elemento principale. La funzione sibling-index() restituisce un numero intero, quindi deve essere moltiplicata per un'unità di tempo per convertirla in un'ora.

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

OBBLIGATORIO: rispetta le preferenze degli utenti disattivando l'animazione per gli utenti che preferiscono un movimento ridotto.

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

Strategie di riserva

Verifica il supporto di sibling-index() utilizzando CSS con @supports (animation-delay: calc(sibling-index() * 0.1s)){} o JavaScript con !CSS.supports('animation-delay: calc(sibling-index() * 0.1s)').

Per supportare le animazioni sfalsate nei browser meno recenti, utilizza JavaScript per aggiungere una proprietà personalizzata --sibling-index a ogni elemento di pari livello. OBBLIGATORIO: inserisci questo codice in un test CSS.supports('animation-delay: calc(sibling-index() * 0.1s)') per evitare di eseguire JavaScript non necessario.

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

Aggiungi una dichiarazione animation-delay che utilizza la proprietà personalizzata --sibling-index. Deve essere prima della dichiarazione animation-delay che utilizza la funzione sibling-index(). Non è necessario racchiuderlo in @supports: i browser meno recenti non analizzeranno la seconda dichiarazione e utilizzeranno la prima.

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