Stagger-Animation erstellen

Webfunktionen: sibling-count() und sibling-index()

Gestaffelte Animationen bieten einen interessanten Effekt, bei dem mehrere geordnete Elemente nacheinander mit einer leichten Verzögerung animiert werden, anstatt alle gleichzeitig. Diese Technik wird häufig in Listen, Galerien oder Navigationsmenüs verwendet, um den Blick des Nutzers zu lenken und Interaktionen einen eleganten, rhythmischen Touch zu verleihen.

Animationen mit sibling-index() versetzen

Verwenden Sie die Eigenschaft sibling-index() für die Eigenschaft animation-delay, damit die Animation für jedes Element um eine Zahl versetzt wird, die proportional zu seiner Position im übergeordneten Element ist. Die Funktion sibling-index() gibt eine Ganzzahl zurück. Sie muss daher mit einer Zeiteinheit multipliziert werden, um sie in eine Zeit umzuwandeln.

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

OBLIGATORISCH: Respektieren Sie die Einstellungen der Nutzer, indem Sie die Animation für Nutzer deaktivieren, die weniger Bewegung bevorzugen. 

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

Fallback-Strategien

Prüfe die Unterstützung für sibling-index() mit CSS mit @supports (animation-delay: calc(sibling-index() * 0.1s)){} oder JavaScript mit !CSS.supports('animation-delay: calc(sibling-index() * 0.1s)').

Wenn Sie gestaffelte Animationen in älteren Browsern unterstützen möchten, können Sie mit JavaScript jedem gleichgeordneten Element die benutzerdefinierte Eigenschaft --sibling-index hinzufügen. OBLIGATORISCH: Verpacken Sie dies in einen CSS.supports('animation-delay: calc(sibling-index() * 0.1s)')-Test, um die Ausführung von unnötigem JavaScript zu vermeiden.

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

Fügen Sie eine animation-delay-Deklaration hinzu, die die benutzerdefinierte Eigenschaft --sibling-index verwendet. Sie muss vor der animation-delay-Deklaration stehen, die die sibling-index()-Funktion verwendet. Dies muss nicht in @supports eingeschlossen werden. Ältere Browser parsen die zweite Deklaration nicht und verwenden die erste.

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