Summary  
This chapter explains how to configure the number of times an animation repeats and control its playback direction using animation-iteration-count and animation-direction properties.  

General domain of usage  
Web user interface animations

### Eigenschaft animation-iteration-count
Die Anzahl der Wiederholungen einer Animation kann gesteuert werden. `animation-iteration-count` legt fest, wie oft die Animation wiederholt wird.
```css 
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:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxkaXYgY2xhc3M9Iml0ZW0iPgogICAgICAgIDxwPldpdGhvdXQgaXRlcmF0aW9uIGNvdW50PC9wPgogICAgICAgIDxpbWcKICAgICAgICAgIGNsYXNzPSJmaXJzdC1pbWFnZSIKICAgICAgICAgIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY29kZS0xL2FkdmFuY2VkK2Nzcyt0ZWNobmlxdWVzL2FuaW1hdGlvbnMrc2VjdGlvbi9wbGFuZXQtZWFydGgrKDEpLnBuZyIKICAgICAgICAgIGFsdD0iRWFydGgiCiAgICAgICAgICB3aWR0aD0iMTAwcHgiCiAgICAgICAgLz4KICAgICAgPC9kaXY+CgogICAgICA8ZGl2IGNsYXNzPSJpdGVtIj4KICAgICAgICA8cD5XaXRoIGl0ZXJhdGlvbiBjb3VudCAoNSk8L3A+CiAgICAgICAgPGltZwogICAgICAgICAgY2xhc3M9InNlY29uZC1pbWFnZSIKICAgICAgICAgIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY29kZS0xL2FkdmFuY2VkK2Nzcyt0ZWNobmlxdWVzL2FuaW1hdGlvbnMrc2VjdGlvbi9wbGFuZXQtZWFydGgrKDEpLnBuZyIKICAgICAgICAgIGFsdD0iRWFydGgiCiAgICAgICAgICB3aWR0aD0iMTAwcHgiCiAgICAgICAgLz4KICAgICAgPC9kaXY+CgogICAgICA8ZGl2IGNsYXNzPSJpdGVtIj4KICAgICAgICA8cD5XaXRoIGl0ZXJhdGlvbiBjb3VudCAoaW5maW5pdGUpPC9wPgogICAgICAgIDxpbWcKICAgICAgICAgIGNsYXNzPSJ0aGlyZC1pbWFnZSIKICAgICAgICAgIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY29kZS0xL2FkdmFuY2VkK2Nzcyt0ZWNobmlxdWVzL2FuaW1hdGlvbnMrc2VjdGlvbi9wbGFuZXQtZWFydGgrKDEpLnBuZyIKICAgICAgICAgIGFsdD0iRWFydGgiCiAgICAgICAgICB3aWR0aD0iMTAwcHgiCiAgICAgICAgLz4KICAgICAgPC9kaXY+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

LyogVGhpcyBjaGFwdGVyIGZvY3VzICovCmltZyB7CiAgYW5pbWF0aW9uLW5hbWU6IHNwaW5uZXI7CiAgYW5pbWF0aW9uLWR1cmF0aW9uOiAzczsKICBhbmltYXRpb24tdGltaW5nLWZ1bmN0aW9uOiBsaW5lYXI7Cn0KCkBrZXlmcmFtZXMgc3Bpbm5lciB7CiAgMCUgewogICAgdHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7CiAgfQoKICAxMDAlIHsKICAgIHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7CiAgfQp9Cgouc2Vjb25kLWltYWdlIHsKICBhbmltYXRpb24taXRlcmF0aW9uLWNvdW50OiA1Owp9CgoudGhpcmQtaW1hZ2UgewogIGFuaW1hdGlvbi1pdGVyYXRpb24tY291bnQ6IGluZmluaXRlOwp9CgovKiBOb3QgdGhlIGN1cnJlbnQgZm9jdXMgKi8KLmNvbnRhaW5lciB7CiAgZGlzcGxheTogZmxleDsKICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWFyb3VuZDsKICB3aWR0aDogMTAwJTsKfQoKLml0ZW0gewogIGJvcmRlcjogMXB4IHNvbGlkIGRhcmtibHVlOwogIHdpZHRoOiAyMDBweDsKICBwYWRkaW5nOiAxMHB4OwogIGRpc3BsYXk6IGZsZXg7CiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjsKICBhbGlnbi1pdGVtczogY2VudGVyOwp9CgpwIHsKICB0ZXh0LWFsaWduOiBjZW50ZXI7CiAgZm9udC1zaXplOiAxOHB4OwogIG1hcmdpbi10b3A6IDA7Cn0=

### 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.
```css
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`.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxwPmFuaW1hdGlvbi1kaXJlY3Rpb246IG5vcm1hbDwvcD4KICAgICAgPGltZwogICAgICAgIGNsYXNzPSJpbWFnZS1vbmUiCiAgICAgICAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb2RlLTEvYWR2YW5jZWQrY3NzK3RlY2huaXF1ZXMvYW5pbWF0aW9ucytzZWN0aW9uL2V4YW1wbGUrZm9yK3RoZSthbmltYXRpb24rZGlyZWN0aW9uK3Byb3BlcnR5LnBuZyIKICAgICAgICBhbHQ9ImRvZyIKICAgICAgICB3aWR0aD0iMTAwcHgiCiAgICAgIC8+CiAgICA8L2Rpdj4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxwPmFuaW1hdGlvbi1kaXJlY3Rpb246IHJldmVyc2U8L3A+CiAgICAgIDxpbWcKICAgICAgICBjbGFzcz0iaW1hZ2UtdHdvIgogICAgICAgIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY29kZS0xL2FkdmFuY2VkK2Nzcyt0ZWNobmlxdWVzL2FuaW1hdGlvbnMrc2VjdGlvbi9leGFtcGxlK2Zvcit0aGUrYW5pbWF0aW9uK2RpcmVjdGlvbitwcm9wZXJ0eS5wbmciCiAgICAgICAgYWx0PSJkb2ciCiAgICAgICAgd2lkdGg9IjEwMHB4IgogICAgICAvPgogICAgPC9kaXY+CiAgICA8ZGl2IGNsYXNzPSJjb250YWluZXIiPgogICAgICA8cD5hbmltYXRpb24tZGlyZWN0aW9uOiBhbHRlcm5hdGU8L3A+CiAgICAgIDxpbWcKICAgICAgICBjbGFzcz0iaW1hZ2UtdGhyZWUiCiAgICAgICAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb2RlLTEvYWR2YW5jZWQrY3NzK3RlY2huaXF1ZXMvYW5pbWF0aW9ucytzZWN0aW9uL2V4YW1wbGUrZm9yK3RoZSthbmltYXRpb24rZGlyZWN0aW9uK3Byb3BlcnR5LnBuZyIKICAgICAgICBhbHQ9ImRvZyIKICAgICAgICB3aWR0aD0iMTAwcHgiCiAgICAgIC8+CiAgICA8L2Rpdj4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxwPmFuaW1hdGlvbi1kaXJlY3Rpb246IGFsdGVybmF0ZS1yZXZlcnNlPC9wPgogICAgICA8aW1nCiAgICAgICAgY2xhc3M9ImltYWdlLWZvdXIiCiAgICAgICAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb2RlLTEvYWR2YW5jZWQrY3NzK3RlY2huaXF1ZXMvYW5pbWF0aW9ucytzZWN0aW9uL2V4YW1wbGUrZm9yK3RoZSthbmltYXRpb24rZGlyZWN0aW9uK3Byb3BlcnR5LnBuZyIKICAgICAgICBhbHQ9ImRvZyIKICAgICAgICB3aWR0aD0iMTAwcHgiCiAgICAgIC8+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

LyogVGhpcyBjaGFwdGVyIGZvY3VzICovCmltZyB7CiAgYW5pbWF0aW9uLW5hbWU6IGhvcml6b250YWwtdHJhbnNsYXRpb247CiAgYW5pbWF0aW9uLWR1cmF0aW9uOiAzMDAwbXM7CiAgYW5pbWF0aW9uLXRpbWluZy1mdW5jdGlvbjogbGluZWFyOwogIGFuaW1hdGlvbi1pdGVyYXRpb24tY291bnQ6IGluZmluaXRlOwp9CgpAa2V5ZnJhbWVzIGhvcml6b250YWwtdHJhbnNsYXRpb24gewogIDAlIHsKICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWCgwKTsKICB9CgogIDEwMCUgewogICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVYKDU0MHB4KTsKICB9Cn0KCi5pbWFnZS1vbmUgewogIGFuaW1hdGlvbi1kaXJlY3Rpb246IG5vcm1hbDsKfQoKLmltYWdlLXR3byB7CiAgYW5pbWF0aW9uLWRpcmVjdGlvbjogcmV2ZXJzZTsKfQoKLmltYWdlLXRocmVlIHsKICBhbmltYXRpb24tZGlyZWN0aW9uOiBhbHRlcm5hdGU7Cn0KCi5pbWFnZS1mb3VyIHsKICBhbmltYXRpb24tZGlyZWN0aW9uOiBhbHRlcm5hdGUtcmV2ZXJzZTsKfQoKLyogTm90IHRoZSBjdXJyZW50IGZvY3VzICovCi5jb250YWluZXIgewogIGJvcmRlcjogMXB4IHNvbGlkIGRhcmtibHVlOwogIHBhZGRpbmc6IDEwcHg7CiAgd2lkdGg6IDY0MHB4Owp9CgpwIHsKICBtYXJnaW4tdG9wOiAwOwp9

Verbessern Sie Ihre Styling-Fähigkeiten durch das Beherrschen fortgeschrittener CSS-Techniken für modernes Webdesign. Positionieren und verwalten Sie Elemente präzise mit fortgeschrittenen Positionierungsstrategien. Erstellen Sie fließende Übergänge und ansprechende Animationen zur Verbesserung der Benutzererfahrung. Transformieren und manipulieren Sie Elemente für dynamische visuelle Effekte. Entwickeln Sie responsive Designs, die sich an verschiedene Geräte anpassen, und optimieren Sie Ihren Workflow mit CSS-Präprozessoren wie Sass.

Erfahren Sie, was Lernende von diesem Kurs zu fortgeschrittenem HTML- und CSS-Styling erwarten können. Welche Vorkenntnisse sind vor Kursbeginn erforderlich? Welche Themen werden behandelt?

Elemente auf Webseiten positionieren und verwalten. Verschiedene Positionierungseigenschaften kennenlernen, den Stapelreihenfolge nutzen, um die Sichtbarkeit überlappender Elemente zu steuern, und schließlich den Umgang mit Überlauf von Inhalten beherrschen.

Untersuchung der Leistungsfähigkeit von Übergängen und Möglichkeiten zur Verbesserung der Benutzererfahrung. Erläuterung, wie Eigenschaften fließend und schrittweise animiert werden, um nahtlose Zustandsübergänge zu ermöglichen.

Erfahren Sie mehr über die Eigenschaft „animation“ und deren Einsatz zur Erstellung dynamischer und ansprechender Designs. Entdecken Sie die Erstellung komplexer Animationen mit Keyframes sowie die Steuerung der Animation.

Untersuchung der Transformations-Eigenschaft, die das Modifizieren von Aussehen und Position von Elementen auf einer Webseite ermöglicht. Skalierung, Rotation, Schrägstellung und Verschiebung von Elementen in zwei und drei Dimensionen. Kombination mehrerer Transformationen zur Erzeugung komplexerer Effekte.

Die Prinzipien und Techniken des adaptiven/responsiven Designs zielen darauf ab, Websites und Anwendungen auf verschiedenen Geräten, Bildschirmgrößen und Ausrichtungen zugänglich und optisch ansprechend zu gestalten.

Erfahren Sie mehr über Präprozessoren in CSS und wie sie dabei helfen, effizienteren und besser wartbaren Code zu schreiben. Verstehen Sie, wie Präprozessoren den Arbeitsablauf vereinfachen und saubereren CSS-Code generieren können.

Steuerung von Animationswiederholungen und -Richtung

Eigenschaft animation-iteration-count

animation-direction Eigenschaft

Awesome!

Steuerung von Animationswiederholungen und -Richtung

Eigenschaft animation-iteration-count

animation-direction Eigenschaft