PricingLoginStart free
CSS Academy · Lektion

Animationsrichtung, Fill-Mode und Wiederholungen

Steuern Sie die Wiedergaberichtung, die Anzahl der Schleifen und den Endzustand einer Animation mit fill-mode.

Lektion 2 von 413 Schritte

Animationsrichtung, Fill-Mode und Wiederholungen ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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.

animation-iteration-count

Steuert, wie oft die Animation wiederholt wird. Verwenden Sie infinite für eine kontinuierliche Wiederholung.

<div class="spinner"></div>
<div class="pulse"></div>

animation-direction

Steuert die Wiedergaberichtung in abwechselnden Zyklen:

  • normal — wird bei jeder Wiederholung vorwärts abgespielt
  • reverse — wird rückwärts abgespielt
  • alternate — abwechselnd vorwärts und rückwärts
  • alternate-reverse — rückwärts und anschließend vorwärts
<div class="bounce"></div>

animation-fill-mode

Definiert, was mit dem Element vor dem Start und nach dem Ende der Animation geschieht:

  • none — Standardwert, kehrt zum ursprünglichen Zustand zurück
  • forwards — behält nach Abschluss den letzten Keyframe bei
  • backwards — wendet während der Verzögerung den ersten Keyframe an
  • both — wendet sowohl backwards als auch forwards an

Fill-Mode forwards

Der häufigste Anwendungsfall: Das Element bleibt nach Abschluss der Animation in seinem animierten Endzustand:

<p class="item">I fade in and stay visible</p>

Fill-Mode backwards

Wenn eine Verzögerung vorhanden ist, sorgt backwards dafür, dass das Element während der Verzögerung im Zustand des ersten Keyframes startet. So wird ein kurzes Aufblitzen des ursprünglichen Zustands vor Beginn der Animation verhindert:

<p class="item">Starts invisible during the delay</p>

Fill-Mode both

both kombiniert forwards und backwards und ist die vorhersehbarste Option für animierte Elemente, die weder vor noch nach der Animation kurz aufblitzen sollen.

animation-delay

Verzögert den Start einer Animation. Bei negativen Verzögerungen startet die Animation mitten im Ablauf. Das ist nützlich, um mehrere Animationen zu synchronisieren:

<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>

Muster für gestaffelte Animationen

Eine ausschließlich mit CSS umgesetzte Staffelung mithilfe von Verzögerungen mit nth-child:

<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>

Anhalten und Fortsetzen

Schalten Sie den Animationszustand mit JavaScript um, indem Sie animation-play-state ändern:

<div class="spinner" id="js-spinner"></div>
<button onclick="const s=document.getElementById('js-spinner').style; s.animationPlayState = s.animationPlayState === 'paused' ? 'running' : 'paused';">Pause / Resume</button>

Animationen zurücksetzen

Um eine CSS-Animation erneut abzuspielen, entfernen Sie die Klasse und fügen Sie sie anschließend wieder hinzu. Der Browser verwendet dabei einen Trick: Erzwingen Sie zwischen dem Entfernen und dem Hinzufügen einen Reflow.

<div class="box" id="reset-box"></div>
<button onclick="const el=document.getElementById('reset-box'); el.classList.remove('animate'); void el.offsetWidth; el.classList.add('animate');">Replay Animation</button>

Negative animation-delay

Starten Sie eine Animation mithilfe einer negativen Verzögerung mitten im Ablauf. Das ist nützlich für synchronisierte Hintergrundmuster oder sich wiederholende Elemente, die bereits in Bewegung erscheinen sollen.

<div class="star"></div>
<div class="star"></div>
<div class="star"></div>

Kurze Überprüfung

Welcher Wert von animation-fill-mode sorgt dafür, dass das Element nach dem Ende der Animation seinen letzten Keyframe-Zustand beibehält?

Beantworte es in der interaktiven Lektion

Zusammenfassung

animation-iteration-count: infinite wiederholt die Animation unendlich oft. animation-direction: alternate lässt sie vorwärts und rückwärts ablaufen. animation-fill-mode: forwards hält den Endzustand. animation-fill-mode: both ist die sicherste Option. Verwenden Sie negative Verzögerungen, um synchronisierte Animationen zeitlich zu versetzen.

Kostenlos starten

Lerne CSS mit einem KI-Tutor — kostenlos

Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.

Kurse
40
Lektionen
159
Kostenlos lernenDen vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „Animationsrichtung, Fill-Mode und Wiederholungen“ kostenlos?

Ja — der vollständige Text von „Animationsrichtung, Fill-Mode und Wiederholungen“ 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 „Animationsrichtung, Fill-Mode und Wiederholungen“?

Steuern Sie die Wiedergaberichtung, die Anzahl der Schleifen und den Endzustand einer Animation mit fill-mode. 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 2 von 4.

Wie lange dauert die Lektion „Animationsrichtung, Fill-Mode und Wiederholungen“?

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

  1. @keyframes-Syntax und Animationseigenschaft
  2. Animationsrichtung, Fill-Mode und Wiederholungen
  3. Animationen verketten und sequenzieren
  4. Barrierefreie Animationen mit prefers-reduced-motion
← Zurück zu CSS Academy