Animationen verketten und sequenzieren
Erstellen Sie komplexe Abläufe, indem Sie mehrere Animationen mit versetzten Verzögerungen verketten.
Animationen verketten und sequenzieren ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Warum Animationen sequenzieren?
Komplexe UI-Effekte erfordern häufig mehrere Animationen, die nacheinander ablaufen: Ein Element gleitet herein, pausiert und blendet anschließend aus. CSS bietet mehrere Möglichkeiten, Animationen ohne JavaScript zu verketten.
Sequenzierung mit animation-delay
Die einfachste Sequenzierung: Berechnen Sie anhand der Dauer der vorherigen Animation, wann die nächste starten soll:
<div class="element">Slides in, then fades out</div>
Mehrstufige Keyframes
Für ein einzelnes Element ist dies der sauberste Ansatz: Kodieren Sie die gesamte Sequenz in einer einzigen @keyframes-Regel mit Wegpunkten in Prozentangaben:
<div class="toast">Notification toast</div>
CSS Custom Properties für die Dauer
Speichern Sie Dauern in CSS-Variablen, um verkettete Animationen einfach aufeinander abzustimmen:
<div class="box">Custom-property-driven timing</div>
animation-timeline (modern)
Die Web Animations API und Scroll-verknüpfte Animationen (ScrollTimeline) ermöglichen eine anspruchsvolle Sequenzierung ohne Berechnungen von Verzögerungen. Dies ist die Zukunft der Orchestrierung komplexer CSS-Animationen.
Staffelung mit CSS Custom Properties
Steuern Sie Staffelungsverzögerungen über CSS Custom Properties, die inline oder mit JavaScript gesetzt werden:
<div class="item" style="--delay:0ms">Item 1</div>
<div class="item" style="--delay:120ms">Item 2</div>
<div class="item" style="--delay:240ms">Item 3</div>
Sequenzierung mit JavaScript
Verwenden Sie für präzise Sequenzen mit mehreren Elementen die Web Animations API oder eine Bibliothek wie GSAP. CSS allein bietet nur begrenzte Möglichkeiten, unabhängige Elemente mit komplexen Abhängigkeiten zu koordinieren.
Aufmerksamkeitsanimationen
Eine Sequenz für eine Aufmerksamkeitsanimation, die zunächst pulsiert und sich anschließend stabilisiert:
<div class="notification">New message!</div>
Das AnimationEnd-Ereignis
Hören Sie in JavaScript auf animationend, um den nächsten Schritt programmgesteuert auszulösen:
<div class="box" id="ae-box">Watch me</div>
<script>
const el = document.getElementById('ae-box');
el.addEventListener('animationend', (e) => {
if (e.animationName === 'slideIn') {
el.classList.add('phase-2');
el.textContent = 'animationend fired!';
}
});
</script>
Muster für Seitenübergänge
Eine CSS-Seitenübergangssequenz mit dem Umschalten von Klassen:
<div class="page-leaving">Leaving page</div>
<div class="page-entering">Entering page</div>
Skeleton für den Ladestatus
Eine mehrstufige Skeleton-Ladeanimation mit Offsets:
<div class="skeleton-text"></div>
<div class="skeleton-text"></div>
<div class="skeleton-text"></div>
Kurze Überprüfung
Wie lässt sich eine vollständige mehrstufige Animationssequenz für ein einzelnes Element am besten in CSS definieren?
Zusammenfassung
Bei der Sequenzierung von CSS-Animationen werden Verzögerungen anhand vorheriger Dauern festgelegt, mehrstufige @keyframes mit Wegpunkten in Prozentangaben verwendet oder Dauerwerte in Custom Properties gespeichert. Das Ereignis animationend ermöglicht sequenzielle Phasen, die durch JavaScript ausgelöst werden. Für die Orchestrierung komplexer Animationen mit mehreren Elementen sollten Sie die Web Animations API in Betracht ziehen.
Häufig gestellte Fragen
Ist die Lektion „Animationen verketten und sequenzieren“ kostenlos?
Ja — der vollständige Text von „Animationen verketten und sequenzieren“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Animationen verketten und sequenzieren“?
Erstellen Sie komplexe Abläufe, indem Sie mehrere Animationen mit versetzten Verzögerungen verketten. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um CSS Academy zu starten?
Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „Animationen verketten und sequenzieren“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?
Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- @keyframes-Syntax und Animationseigenschaft
- Animationsrichtung, Fill-Mode und Wiederholungen
- Animationen verketten und sequenzieren
- Barrierefreie Animationen mit prefers-reduced-motion