Summary  
This chapter covers how to configure the timing aspects of animations using CSS properties—animation-duration, animation-delay, and animation-timing-function—to control how long an animation runs, when it starts, and how it accelerates or decelerates.

General domain of usage  
Front-end web development

Betrachten wir alle möglichen Methoden zur Arbeit mit der Animationszeit.

### animation-duration Eigenschaft
`animation-duration` legt die Zeit fest, die eine Animation benötigt, um einen Zyklus abzuschließen (Übergang vom Anfangs- zum Endzustand), gemessen in Sekunden (`s`) oder Millisekunden (`ms`).
```css
animation-duration: 3s | 3000ms
```

Führen Sie das folgende Beispiel aus und bewegen Sie den Mauszeiger über das Kästchen:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxwPgogICAgICBIb3ZlciB0aGUgYXJlYSBiZWxvdyB0byBzZWUgdGhlIGRpZmZlcmVuY2UgaW4gdGhlIGJlaGF2aW9yIG9mIHRoZQogICAgICBkaWZmZXJlbnQgdGltZSBkdXJhdGlvbi4KICAgIDwvcD4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxkaXYgY2xhc3M9ImJveCI+MXM8L2Rpdj4KICAgICAgPGRpdiBjbGFzcz0iYm94Ij4yczwvZGl2PgogICAgICA8ZGl2IGNsYXNzPSJib3giPjVzPC9kaXY+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

LyogVGhpcyBjaGFwdGVyIGZvY3VzICovCkBrZXlmcmFtZXMgY2hhbmdlQmFja2dyb3VuZENvbG9yIHsKICAwJSB7CiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjMDc3YjhhOwogIH0KCiAgMzAlIHsKICAgIGJhY2tncm91bmQtY29sb3I6ICNkNzI2MzE7CiAgfQoKICAxMDAlIHsKICAgIGJhY2tncm91bmQtY29sb3I6ICM1YzNjOTI7CiAgfQp9CgouY29udGFpbmVyOmhvdmVyIC5ib3ggewogIGFuaW1hdGlvbi1uYW1lOiBjaGFuZ2VCYWNrZ3JvdW5kQ29sb3I7Cn0KLmNvbnRhaW5lcjpob3ZlciAuYm94Om50aC1jaGlsZCgxKSB7CiAgYW5pbWF0aW9uLWR1cmF0aW9uOiAxczsKfQouY29udGFpbmVyOmhvdmVyIC5ib3g6bnRoLWNoaWxkKDIpIHsKICBhbmltYXRpb24tZHVyYXRpb246IDJzOwp9Ci5jb250YWluZXI6aG92ZXIgLmJveDpudGgtY2hpbGQoMykgewogIGFuaW1hdGlvbi1kdXJhdGlvbjogNXM7Cn0KCi8qIE5vdCB0aGUgY3VycmVudCBmb2N1cyAqLwpwIHsKICB0ZXh0LWFsaWduOiBjZW50ZXI7Cn0KCi5jb250YWluZXIgewogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1hcm91bmQ7CgogIGJvcmRlcjogMnB4IHNvbGlkOwogIHBhZGRpbmc6IDEwcHg7Cn0KCi5ib3ggewogIHdpZHRoOiAxMDBweDsKICBoZWlnaHQ6IDEwMHB4OwogIGJhY2tncm91bmQtY29sb3I6ICMwNzdiOGE7CiAgYm9yZGVyOiAycHggc29saWQgdGVhbDsKCiAgZGlzcGxheTogZmxleDsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwoKICBmb250LXNpemU6IDIwcHg7CiAgY29sb3I6IHdoaXRlOwp9

### animation-timing-function Eigenschaft
`animation-timing-function` legt fest, wie die Animation im Zeitverlauf abläuft, und steuert die Beschleunigung und Verzögerung der Animation. Die `animation-timing-function` kann die gleichen Werte wie die Eigenschaft `transition-timing-function` annehmen. Es stehen mehrere vordefinierte Timing-Funktionen zur Verfügung, wie `linear`, `ease` und `ease-in-out`, oder es kann eine benutzerdefinierte kubische Bézier-Kurve mit der Funktion `cubic-bezier()` definiert werden.
```css
animation-timing-function: time_function
```
Wenden wir verschiedene time_functions auf die Kästchen im Beispiel an:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxwPgogICAgICBIb3ZlciB0aGUgYXJlYSBiZWxvdyB0byBzZWUgdGhlIGRpZmZlcmVuY2UgaW4gdGhlIGJlaGF2aW9yIG9mIHRoZQogICAgICBkaWZmZXJlbnQgdGltZSBkdXJhdGlvbi4KICAgIDwvcD4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxkaXYgY2xhc3M9ImJveCI+ZWFzZTwvZGl2PgogICAgICA8ZGl2IGNsYXNzPSJib3giPmVhc2UtaW48L2Rpdj4KICAgICAgPGRpdiBjbGFzcz0iYm94Ij5lYXNlLW91dDwvZGl2PgogICAgPC9kaXY+CiAgPC9ib2R5Pgo8L2h0bWw+

LyogVGhpcyBjaGFwdGVyIGZvY3VzICovCkBrZXlmcmFtZXMgY2hhbmdlQmFja2dyb3VuZENvbG9yIHsKICAwJSB7CiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjMDc3YjhhOwogIH0KCiAgMzAlIHsKICAgIGJhY2tncm91bmQtY29sb3I6ICNkNzI2MzE7CiAgfQoKICAxMDAlIHsKICAgIGJhY2tncm91bmQtY29sb3I6ICM1YzNjOTI7CiAgfQp9CgouY29udGFpbmVyOmhvdmVyIC5ib3ggewogIGFuaW1hdGlvbi1uYW1lOiBjaGFuZ2VCYWNrZ3JvdW5kQ29sb3I7CiAgYW5pbWF0aW9uLWR1cmF0aW9uOiAyczsKfQouY29udGFpbmVyOmhvdmVyIC5ib3g6bnRoLWNoaWxkKDEpIHsKICBhbmltYXRpb24tdGltaW5nLWZ1bmN0aW9uOiBlYXNlOwp9Ci5jb250YWluZXI6aG92ZXIgLmJveDpudGgtY2hpbGQoMikgewogIGFuaW1hdGlvbi10aW1pbmctZnVuY3Rpb246IGVhc2UtaW47Cn0KLmNvbnRhaW5lcjpob3ZlciAuYm94Om50aC1jaGlsZCgzKSB7CiAgYW5pbWF0aW9uLXRpbWluZy1mdW5jdGlvbjogZWFzZS1vdXQ7Cn0KCi8qIE5vdCB0aGUgY3VycmVudCBmb2N1cyAqLwpwIHsKICB0ZXh0LWFsaWduOiBjZW50ZXI7Cn0KCi5jb250YWluZXIgewogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1hcm91bmQ7CgogIGJvcmRlcjogMnB4IHNvbGlkOwogIHBhZGRpbmc6IDEwcHg7Cn0KCi5ib3ggewogIHdpZHRoOiAxMDBweDsKICBoZWlnaHQ6IDEwMHB4OwogIGJhY2tncm91bmQtY29sb3I6ICMwNzdiOGE7CiAgYm9yZGVyOiAycHggc29saWQgdGVhbDsKCiAgZGlzcGxheTogZmxleDsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwoKICBmb250LXNpemU6IDIwcHg7CiAgY29sb3I6IHdoaXRlOwp9

### animation-delay Eigenschaft
`animation-delay` legt die Zeitspanne fest, die vor dem Start der Animation verstreichen soll. Sie kann in Sekunden (`s`) oder Millisekunden (`ms`) angegeben werden.
```css
animation-delay: 0.1s | 100ms
```
Im Beispiel werden den Boxen unterschiedliche Verzögerungen zugewiesen:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxwPgogICAgICBIb3ZlciB0aGUgYXJlYSBiZWxvdyB0byBzZWUgdGhlIGRpZmZlcmVuY2UgaW4gdGhlIGJlaGF2aW9yIG9mIHRoZQogICAgICBkaWZmZXJlbnQgdGltZSBkdXJhdGlvbi4KICAgIDwvcD4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxkaXYgY2xhc3M9ImJveCI+MTAwbXM8L2Rpdj4KICAgICAgPGRpdiBjbGFzcz0iYm94Ij4zMDBtczwvZGl2PgogICAgICA8ZGl2IGNsYXNzPSJib3giPjEwMDBtczwvZGl2PgogICAgPC9kaXY+CiAgPC9ib2R5Pgo8L2h0bWw+

LyogVGhpcyBjaGFwdGVyIGZvY3VzICovCkBrZXlmcmFtZXMgY2hhbmdlQmFja2dyb3VuZENvbG9yIHsKICAwJSB7CiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjMDc3YjhhOwogIH0KCiAgMzAlIHsKICAgIGJhY2tncm91bmQtY29sb3I6ICNkNzI2MzE7CiAgfQoKICAxMDAlIHsKICAgIGJhY2tncm91bmQtY29sb3I6ICM1YzNjOTI7CiAgfQp9CgouY29udGFpbmVyOmhvdmVyIC5ib3ggewogIGFuaW1hdGlvbi1uYW1lOiBjaGFuZ2VCYWNrZ3JvdW5kQ29sb3I7CiAgYW5pbWF0aW9uLWR1cmF0aW9uOiAyczsKICBhbmltYXRpb24tdGltaW5nLWZ1bmN0aW9uOiBlYXNlLWluLW91dDsKfQouY29udGFpbmVyOmhvdmVyIC5ib3g6bnRoLWNoaWxkKDEpIHsKICBhbmltYXRpb24tZGVsYXk6IDEwMG1zOwp9Ci5jb250YWluZXI6aG92ZXIgLmJveDpudGgtY2hpbGQoMikgewogIGFuaW1hdGlvbi1kZWxheTogMzAwbXM7Cn0KLmNvbnRhaW5lcjpob3ZlciAuYm94Om50aC1jaGlsZCgzKSB7CiAgYW5pbWF0aW9uLWRlbGF5OiAxMDAwbXM7Cn0KCi8qIE5vdCB0aGUgY3VycmVudCBmb2N1cyAqLwpwIHsKICB0ZXh0LWFsaWduOiBjZW50ZXI7Cn0KCi5jb250YWluZXIgewogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1hcm91bmQ7CgogIGJvcmRlcjogMnB4IHNvbGlkOwogIHBhZGRpbmc6IDEwcHg7Cn0KCi5ib3ggewogIHdpZHRoOiAxMDBweDsKICBoZWlnaHQ6IDEwMHB4OwogIGJhY2tncm91bmQtY29sb3I6ICMwNzdiOGE7CiAgYm9yZGVyOiAycHggc29saWQgdGVhbDsKCiAgZGlzcGxheTogZmxleDsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwoKICBmb250LXNpemU6IDIwcHg7CiAgY29sb3I6IHdoaXRlOwp9

Wir können die Verzögerungszeit für den Start der Animation, die Dauer der Animation sowie den Animationsfortschritt über die Zeit festlegen.

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.

Definition von Animationsdauer und -Timing

animation-duration Eigenschaft

animation-timing-function Eigenschaft

animation-delay Eigenschaft