Créer une animation en décalé

Les animations décalées offrent un effet intéressant : plusieurs éléments ordonnés s'animent de manière séquentielle avec un léger délai entre chacun, plutôt que de s'animer tous en même temps. Cette technique est souvent utilisée dans les listes, les galeries ou les menus de navigation pour guider le regard de l'utilisateur et ajouter une touche de fluidité et de rythme aux interactions.

Échelonner les animations avec sibling-index()

Utilisez la propriété sibling-index() sur la propriété animation-delay pour que l'animation de chaque élément soit décalée d'un nombre proportionnel à sa position dans son parent. La fonction sibling-index() renvoie un entier. Elle doit donc être multipliée par une unité de temps pour être convertie en heure.

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

OBLIGATOIRE : Respectez les préférences des utilisateurs en désactivant l'animation pour ceux qui préfèrent des mouvements réduits.

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

Stratégies de remplacement

Testez la compatibilité avec sibling-index() à l'aide de CSS avec @supports (animation-delay: calc(sibling-index() * 0.1s)){} ou de JavaScript avec !CSS.supports('animation-delay: calc(sibling-index() * 0.1s)').

Pour prendre en charge les animations décalées dans les anciens navigateurs, utilisez JavaScript pour ajouter une propriété personnalisée --sibling-index à chaque élément frère. OBLIGATOIRE : encapsulez ce code dans un test CSS.supports('animation-delay: calc(sibling-index() * 0.1s)') pour éviter d'exécuter du code JavaScript inutile.

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

Ajoutez une déclaration animation-delay qui utilise la propriété personnalisée --sibling-index. Elle doit se trouver avant la déclaration animation-delay qui utilise la fonction sibling-index(). Il n'est pas nécessaire d'encapsuler cela dans @supports. Les anciens navigateurs n'analyseront pas la deuxième déclaration et utiliseront la première.

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