Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Steuerung von Animationswiederholungen und -Richtung | Fortgeschrittene CSS-Animationen
Fortgeschrittene CSS-Techniken

bookSteuerung von Animationswiederholungen und -Richtung

Eigenschaft animation-iteration-count

Die Anzahl der Wiederholungen einer Animation kann gesteuert werden. animation-iteration-count legt fest, wie oft die Animation wiederholt wird.

animation-iteration-count: number_without_units

Alternativ kann das Schlüsselwort infinite als Wert angegeben werden. Dadurch läuft die Animation unendlich oft ab. Im folgenden Beispiel wird gezeigt, wie sich die Anzahl der Animationen beeinflussen lässt:

index.html

index.html

index.css

index.css

copy

animation-direction Eigenschaft

animation-direction steuert die Richtung der Animation. Sie legt fest, ob eine Animation vorwärts, rückwärts oder abwechselnd vorwärts und rückwärts abgespielt werden soll.

animation-direction: normal | reverse | alternate | alternate-reverse
  • normal – Standardwert. Die Animation läuft vorwärts vom Anfang bis zum Ende;
  • reverse – Die Animation läuft rückwärts vom Ende bis zum Anfang;
  • alternate – Die Animation läuft vorwärts und dann rückwärts, abwechselnd in beide Richtungen;
  • alternate-reverse – Die Animation läuft rückwärts und dann vorwärts, abwechselnd in beide Richtungen.

Sehen wir uns an, welchen Effekt wir im folgenden Beispiel erzielen können. Wir haben ein Bild, dessen Standardverhalten darin besteht, sich wiederholt von der linken zur rechten Seite zu bewegen. Dieses Verhalten können wir jedoch ändern. Wir testen alle vier Werte der Eigenschaft animation-direction.

index.html

index.html

index.css

index.css

copy

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 4. Kapitel 3

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Awesome!

Completion rate improved to 2.04

bookSteuerung von Animationswiederholungen und -Richtung

Swipe um das Menü anzuzeigen

Eigenschaft animation-iteration-count

Die Anzahl der Wiederholungen einer Animation kann gesteuert werden. animation-iteration-count legt fest, wie oft die Animation wiederholt wird.

animation-iteration-count: number_without_units

Alternativ kann das Schlüsselwort infinite als Wert angegeben werden. Dadurch läuft die Animation unendlich oft ab. Im folgenden Beispiel wird gezeigt, wie sich die Anzahl der Animationen beeinflussen lässt:

index.html

index.html

index.css

index.css

copy

animation-direction Eigenschaft

animation-direction steuert die Richtung der Animation. Sie legt fest, ob eine Animation vorwärts, rückwärts oder abwechselnd vorwärts und rückwärts abgespielt werden soll.

animation-direction: normal | reverse | alternate | alternate-reverse
  • normal – Standardwert. Die Animation läuft vorwärts vom Anfang bis zum Ende;
  • reverse – Die Animation läuft rückwärts vom Ende bis zum Anfang;
  • alternate – Die Animation läuft vorwärts und dann rückwärts, abwechselnd in beide Richtungen;
  • alternate-reverse – Die Animation läuft rückwärts und dann vorwärts, abwechselnd in beide Richtungen.

Sehen wir uns an, welchen Effekt wir im folgenden Beispiel erzielen können. Wir haben ein Bild, dessen Standardverhalten darin besteht, sich wiederholt von der linken zur rechten Seite zu bewegen. Dieses Verhalten können wir jedoch ändern. Wir testen alle vier Werte der Eigenschaft animation-direction.

index.html

index.html

index.css

index.css

copy

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 4. Kapitel 3
some-alt