Steuerung 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.css
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.css
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Awesome!
Completion rate improved to 2.04
Steuerung 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.css
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.css
Danke für Ihr Feedback!