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.