Steuerung der Animationswiedergabemenge und -Richtung

animation-iteration-count Eigenschaft

Wir können steuern, wie oft eine Animation abgespielt werden soll. animation-iteration-count legt die Anzahl der Wiederholungen der Animation fest.

Wir können auch das Schlüsselwort infinite als Wert angeben. So wird die Animation immer weiterlaufen. Betrachten wir das folgende Beispiel und prüfen, wie wir die Anzahl der Animationen beeinflussen können:

animation-direction Eigenschaft

animation-direction steuert die Richtung der Animation. Es bestimmt, ob eine Animation vorwärts, rückwärts oder abwechselnd vorwärts und rückwärts ablaufen soll.

• 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 zwischen den beiden Richtungen;
• alternate-reverse - Die Animation läuft rückwärts und vorwärts, abwechselnd zwischen den beiden Richtungen.

Schauen wir uns an, welchen Effekt wir im folgenden Beispiel erzielen können. Wir haben ein Bild, bei dem das Standardverhalten darin besteht, sich wiederholt von der linken Seite zur rechten zu bewegen. Wir können jedoch sein Verhalten ändern. Wir werden alle vier Werte für die animation-direction Eigenschaft testen.