Wie man Elemente zeitversetzt einblendet
Wie man UI-Elemente mit einem Versatz sequenziert: Reihenfolge wählen, Verzögerungen berechnen, Gesamtdauer begrenzen und wissen, wann man nicht staffelt.
Kernaussage
Staffeln heißt, mehrere Animationen zu leicht unterschiedlichen Zeitpunkten zu starten, damit das Auge einer Hierarchie folgen kann. Wähle eine Reihenfolge, die zum Layout passt, halte jede Verzögerung klein und begrenze die Gesamtdauer, damit eine lange Liste nicht sekundenlang erscheint. Staffeln ist für wenige zusammengehörige Elemente gedacht, nicht für jede Tabellenzeile.
Warum Staffeln funktioniert
Das Auge folgt der Bewegung. Animieren mehrere Elemente exakt gleichzeitig, liest man sie als Block; starten sie leicht versetzt, liest der Betrachter sie in der Reihenfolge, und genau so wird Hierarchie ohne zusätzliche Labels vermittelt.
Wähle die Reihenfolge aus dem Layout
DOM-Reihenfolge ist nicht immer visuelle Reihenfolge, besonders in Rastern und umgekehrten Zeilen. Nutze die gerenderte Position und drehe die Richtung für Sprachen von rechts nach links. Sind die Elemente gleichrangig, ist eine gleichmäßige Verzögerung gut; ist eines die Überschrift, startet es zuerst.
Die Verzögerungsrechnung und eine Obergrenze
Die Gesamtdauer ist ungefähr die Verzögerung mal Anzahl der Elemente plus die Dauer des letzten. Diese Summe erlebt der Nutzer. Ein kurzer Versatz über fünf Elemente wirkt lebendig; derselbe Versatz über vierzig Zeilen wird zur langsamen Kaskade.
Wann man nicht staffelt
Staffele keinen Inhalt, auf den der Nutzer wartet, etwa eine Seite, zu der er gerade navigiert ist. Staffele nicht bei jedem Neu-Rendern und nicht bei Elementen, die live aktualisiert werden. Staffeln ist ein Eingang, kein dauerhaftes Verhalten.
Umkehren und unterbrechen
Kann eine Liste schließen, kehre die Reihenfolge um, damit das zuletzt angekommene Element zuerst geht. Navigiert oder filtert der Nutzer mitten in der Animation, soll der neue Zustand aus der aktuellen Position übernehmen, statt den Eingang von null zu wiederholen.
Barrierefreiheit
Reduzierte Bewegung soll den Versatz entfernen und den Inhalt sofort zeigen. Staffele keine Informationen, die der Nutzer sofort braucht, und nutze die Verzögerung nie, um langsames Laden zu verstecken.
Produktionsnahes Implementierungsbeispiel
.item {
animation: rise 260ms ease-out both;
animation-delay: calc(var(--i) * 40ms);
}
@keyframes rise {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.item { animation: none; }
}Wichtige Prinzipien
- Staffeln vermittelt Hierarchie, indem das Auge der Bewegung folgt
- Ordne nach gerenderte Position und drehe die Richtung für RTL-Layouts
- Gesamtdauer = Verzögerung x Elemente + Dauer des letzten, also begrenze die Liste
- Staffele nie Inhalte, auf die der Nutzer wartet
- Reduzierte Bewegung soll alles sofort zeigen
Häufige Fragen
Quellen
- Motion overview: how it works — Material Design 3
- Animation performance and frame rate — web.dev
- prefers-reduced-motion — MDN Web Docs