CSS-Animationen
CSS-Animationen ermöglichen es, dass sich das Erscheinungsbild eines Elements allmählich ändert, z. B. in Farbe, Größe, Position oder Transparenz. Animationen sind entscheidend für moderne, dynamische Websites.
Einfache Animation mit @keyframes
Die Regel @keyframes definiert die Schritte einer Animation. Wir können angeben, wie sich der Zustand eines Elements zwischen Start- und Endpunkt verändert.
In diesem Beispiel wechselt die Hintergrundfarbe einer Box von Rot zu Gelb und wieder zurück, in einer Endlosschleife.
Animationseigenschaften
Animationen lassen sich mit mehreren Untereigenschaften steuern. Dazu gehören der Name, die Dauer, die Timing-Funktion, die Verzögerung und die Anzahl der Wiederholungen.
| Eigenschaft | Beschreibung |
|---|---|
| animation-name | Legt fest, welche @keyframes-Animation verwendet wird. |
| animation-duration | Die Dauer der Animation in Sekunden oder Millisekunden. |
| animation-timing-function | Die Geschwindigkeitskurve der Animation (z. B. ease, linear, ease-in, ease-out). |
| animation-delay | Wie lange die Animation verzögert starten soll. |
| animation-iteration-count | Wie oft die Animation wiederholt werden soll (z. B. unendlich). |
| animation-direction | Die Richtung der Animation (z. B. normal, reverse, alternate). |
Tipps für CSS-Animationen
Die folgenden Tipps helfen dir, Animationen nicht nur optisch ansprechend, sondern auch effizient zu gestalten:
- Verwende Animationen sparsam: zu viel Bewegung kann störend wirken.
- Animieren Sie leistungsfreundliche Eigenschaften (z. B. transform, opacity) und nicht solche, die das Layout beeinflussen (z. B. width, height).
- Kombiniere Animationen und Übergänge für einen natürlicheren Effekt.
✨ Frag Lara — deine KI-Lernpartnerin
Entsperre personalisierte Lernunterstützung. Lara kann Lektionen erklären, Themen zusammenfassen und deine Lernfragen beantworten — verfügbar ab dem Go-Tarif.
Lara hilft dir, schneller zu lernen — exklusiv für ReadyTools Go-, Plus- und Max-Mitglieder.
