CSS-Animationen: Keyframes Visuell Erstellen

Wie CSS-Animationen funktionieren

CSS-Animationen ermoeglichen es, Elemente ohne JavaScript zu animieren. Sie bestehen aus zwei Teilen: einer @keyframes-Regel, die die Animationsstufen definiert, und einer animation-Eigenschaft, die die Keyframes einem Element zuweist und Parameter wie Dauer und Wiederholung festlegt.

Anders als CSS-Transitions, die nur zwischen zwei Zustaenden interpolieren, erlauben Keyframe-Animationen beliebig viele Zwischenstufen. Sie koennen eine komplexe Bewegungssequenz definieren, die sich automatisch abspielt, ohne dass der Nutzer interagieren muss.

Keyframes definieren

Die @keyframes-Regel definiert den Namen der Animation und die Stufen als Prozentwerte von 0% (Start) bis 100% (Ende). Dazwischen koennen Sie beliebig viele Stufen einfuegen:

• 0% und 100%: Start- und Endzustand. Koennen identisch sein fuer Animationen, die zum Ausgangszustand zurueckkehren.
• Zwischenstufen: 25%, 50%, 75% oder beliebige Prozentwerte fuer Zwischenzustaende.
• from/to: Kurzschreibweise fuer einfache Animationen mit nur Start und Ende.

Jede Stufe definiert CSS-Eigenschaftswerte. Der Browser interpoliert die Werte zwischen den Stufen automatisch. Animierbare Eigenschaften umfassen transform, opacity, color, background-color, width, height und viele weitere.

Animationseigenschaften im Detail

Die animation-Kurzschreibweise fasst mehrere Untereigenschaften zusammen:

• animation-duration: Wie lange ein Durchlauf dauert. 0.3s fuer schnelle Uebergaenge, 1-2s fuer sichtbare Animationen.
• animation-timing-function: Die Beschleunigungskurve. ease (Standard), linear, ease-in, ease-out oder cubic-bezier() fuer benutzerdefinierte Kurven.
• animation-iteration-count: Wie oft die Animation laeuft. Eine Zahl oder infinite fuer Endlosschleifen.
• animation-direction: normal, reverse, alternate (hin und zurueck) oder alternate-reverse.
• animation-fill-mode: forwards behaelt den Endzustand bei, backwards wendet den Startzustand vor Beginn an.

Performance-Best-Practices

Nicht alle CSS-Eigenschaften lassen sich effizient animieren. Transform und opacity werden vom GPU beschleunigt und laufen mit 60 fps. Width, height, margin und padding loesen dagegen Layout-Neuberechnungen aus und koennen Ruckler verursachen.

Verwenden Sie transform: translateX() statt left, transform: scale() statt width, und opacity statt visibility. Diese Regel allein verhindert die meisten Performance-Probleme bei CSS-Animationen.

Beachten Sie die prefers-reduced-motion Media Query. Nutzer mit Bewegungsempfindlichkeit koennen in ihrem Betriebssystem reduzierte Animationen anfordern. Respektieren Sie diese Einstellung, indem Sie Animationen fuer diese Nutzer deaktivieren oder stark vereinfachen.

Animationen visuell erstellen

Unser CSS-Animations-Generator laesst Sie Keyframes visuell definieren, Timing-Funktionen anpassen und das Ergebnis in Echtzeit anzeigen. Kopieren Sie den fertigen CSS-Code direkt in Ihr Projekt. Ideal fuer Entwickler, die Animationen ohne manuelles Keyframe-Schreiben erstellen moechten.