CSSAnimationKeyframesWebdesignPerformance

CSS-Animationen mit @keyframes: Praxisguide fuer fluessige Effekte

23.06.2026 8 Min. Lesezeit

Bewegung lenkt den Blick, gibt Rueckmeldung und laesst eine Oberflaeche lebendig wirken. Mit reinem CSS lassen sich die meisten dieser Effekte ganz ohne JavaScript umsetzen. Das Herzstueck ist die @keyframes-Regel: Sie beschreibt, wie sich ein Element ueber die Zeit veraendert. In diesem Praxisguide erfaehrst du, wie die Syntax aufgebaut ist, welche Eigenschaften wirklich fluessig laufen und mit welchen Stellschrauben du Ruckler vermeidest. Am Ende kennst du die Werkzeuge, um eigene Animationen sauber und barrierearm zu bauen.

So funktioniert die @keyframes-Regel

Eine Animation in CSS besteht immer aus zwei Teilen. Zuerst definierst du mit @keyframes eine benannte Sequenz von Zwischenzustaenden. Danach weist du diese Sequenz einem Element ueber die animation-Eigenschaft zu. Die Keyframes selbst beschreiben, welche Stilwerte zu welchem Zeitpunkt gelten sollen. Du nutzt dabei entweder die Schluesselwoerter from und to oder Prozentangaben fuer feinere Abstufungen.

@keyframes einblenden {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.box {
  animation: einblenden 600ms ease-out forwards;
}

Mit Prozentwerten kannst du mehrere Zwischenschritte definieren, etwa bei 0%, 50% und 100%. So baust du komplexere Ablaeufe wie ein kurzes Aufploppen oder eine pulsierende Bewegung. Nicht jeder Keyframe muss alle Eigenschaften nennen: Der Browser interpoliert die Zwischenwerte automatisch.

Die animation-Kurzschreibweise im Detail

Die Eigenschaft animation ist eine Zusammenfassung mehrerer Einzelwerte. Du kannst sie kompakt in einer Zeile schreiben oder die Bestandteile einzeln setzen. Diese Teile solltest du kennen:

animation-name – der Name aus der @keyframes-Regel.
animation-duration – wie lange ein Durchlauf dauert, etwa 600ms oder 1.2s.
animation-timing-function – die Geschwindigkeitskurve, zum Beispiel ease oder linear.
animation-delay – eine Verzoegerung vor dem Start.
animation-iteration-count – die Anzahl der Wiederholungen, auch infinite ist moeglich.
animation-direction – ob normal, rueckwaerts oder im Wechsel (alternate) gespielt wird.
animation-fill-mode – welcher Zustand vor und nach der Animation gilt; forwards haelt den Endzustand.

Die Kurzform fasst diese Werte zusammen: animation: einblenden 600ms ease-out 200ms 1 normal forwards;. Die Reihenfolge ist relativ frei, nur bei zwei Zeitwerten gilt der erste als Dauer und der zweite als Verzoegerung.

Warum manche Eigenschaften ruckeln

Der wichtigste Performance-Hebel ist die Wahl der animierten Eigenschaft. Browser rendern eine Seite in mehreren Schritten: Layout, Paint und Composite. Eigenschaften wie width, height, top oder left veraendern die Geometrie und zwingen den Browser, das Layout neu zu berechnen. Dieser sogenannte Reflow ist teuer und passiert in jedem Frame der Animation erneut.

Anders verhalten sich transform und opacity. Sie greifen erst in der Composite-Phase, koennen oft von der Grafikkarte uebernommen werden und loesen kein neues Layout aus. Deshalb laufen Verschiebungen ueber transform: translate() spuerbar fluessiger als ueber left oder margin. Als Faustregel gilt: Animiere nach Moeglichkeit nur transform und opacity.

Animierbare Eigenschaften im Vergleich

Die folgende Tabelle ordnet haeufig animierte Eigenschaften nach ihrem Rendering-Aufwand ein und nennt eine bessere Alternative, wo sich eine anbietet.

Eigenschaft	Rendering-Phase	Performance	Empfohlene Alternative
transform	Composite	Sehr gut, GPU-faehig	Bereits ideal
opacity	Composite	Sehr gut, GPU-faehig	Bereits ideal
left / top	Layout	Schlecht, loest Reflow aus	transform: translate()
width / height	Layout	Schlecht, loest Reflow aus	transform: scale()
margin / padding	Layout	Schlecht, loest Reflow aus	transform: translate()
background-color	Paint	Mittel, kein Layout	opacity-Ueberblendung
box-shadow	Paint	Mittel bis schwach	Pseudo-Element mit opacity
filter: blur()	Paint / Composite	Variabel, kann teuer sein	Sparsam einsetzen

Timing-Functions richtig waehlen

Die timing-function bestimmt, wie sich die Geschwindigkeit ueber die Dauer verteilt. Sie entscheidet darueber, ob eine Bewegung mechanisch oder natuerlich wirkt. Diese Varianten sind am wichtigsten:

ease – startet langsam, wird schneller und bremst am Ende sanft ab. Ein guter Standard fuer die meisten UI-Effekte.
linear – gleichmaessiges Tempo ohne Beschleunigung. Passt fuer Ladebalken oder fortlaufende Rotationen.
cubic-bezier() – eine frei definierbare Kurve ueber vier Kontrollwerte. Damit baust du eigene Beschleunigungsprofile, etwa ein leichtes Ueberschwingen.
steps() – springt in festen Stufen statt fliessend. Ideal fuer Sprite-Animationen oder einen tickenden Effekt.

Fuer feine Anpassungen lohnt sich ein Blick in cubic-bezier(): Werte wie cubic-bezier(0.34, 1.56, 0.64, 1) erzeugen ein elastisches Nachfedern. Wenn du mit Werten und Einheiten experimentierst, helfen dir auch die Rechner und Konverter in den kostenlosen Webtools.

Barrierefreiheit mit prefers-reduced-motion

Nicht alle Menschen vertragen Bewegung gleich gut. Starke Animationen koennen Schwindel oder Unwohlsein ausloesen. Moderne Betriebssysteme bieten deshalb eine Einstellung, mit der Nutzer Bewegung reduzieren. Diese kannst du in CSS abfragen und respektieren.

@media (prefers-reduced-motion: reduce) {
  .box {
    animation: none;
  }
}

Statt Animationen komplett zu entfernen, kannst du sie auch deutlich verkuerzen oder auf ein simples Einblenden reduzieren. Wichtig ist, dass keine wichtige Information ausschliesslich ueber Bewegung transportiert wird. So bleibt deine Seite fuer alle bedienbar.

Haeufige Fehler vermeiden

Viele Performance-Probleme entstehen nicht durch eine einzelne Animation, sondern durch deren Menge. Diese Stolperfallen tauchen besonders oft auf:

Zu viele gleichzeitige Animationen. Dutzende parallel laufende Effekte ueberfordern den Browser. Animiere nur, was wirklich Aufmerksamkeit braucht.
Layout-Eigenschaften statt transform. Wer Groesse oder Position ueber width und top animiert, riskiert Ruckler. Greife auf scale() und translate() zurueck.
will-change ohne Mass. Die Eigenschaft will-change kann dem Browser helfen, eine Ebene vorzubereiten. Auf zu vielen Elementen kostet sie aber Speicher und kann das Gegenteil bewirken. Setze sie gezielt und entferne sie nach dem Effekt wieder.
Zu lange Dauer. UI-Animationen wirken am besten kurz. Werte deutlich ueber einer Sekunde lassen Interaktionen schnell traege erscheinen.
Fehlendes fill-mode. Ohne forwards springt ein Element nach dem Lauf in den Ausgangszustand zurueck, was oft ungewollt ist.

Weitere Beitraege rund um Webentwicklung und sauberen Code findest du im News-Bereich. Die Startseite mit allen Projekten erreichst du unter kotsch.tech.

Haeufige Fragen

Was ist der Unterschied zwischen transition und animation?

Eine transition reagiert auf einen Zustandswechsel, etwa beim Ueberfahren mit der Maus, und blendet zwischen zwei Werten ueber. Eine animation mit @keyframes kann beliebig viele Zwischenschritte enthalten, von selbst starten und sich wiederholen. Fuer einfache Wechsel reicht meist eine Transition, fuer komplexe Ablaeufe greifst du zur Animation.

Brauche ich JavaScript fuer CSS-Animationen?

Nein. Die meisten visuellen Effekte funktionieren komplett ohne Skript. JavaScript brauchst du erst, wenn du Animationen abhaengig von Nutzerdaten, Scrollposition oder Logik steuern willst. Reine Hover-, Lade- oder Einblendeffekte gelingen mit CSS allein.

Wie viele Frames pro Sekunde sollte eine Animation erreichen?

Als fluessig gilt eine Bildrate um 60 Bilder pro Sekunde, was etwa 16 Millisekunden pro Frame entspricht. Auf Geraeten mit hoeherer Bildwiederholrate sind es entsprechend mehr. Wenn du nur transform und opacity animierst, ist dieses Ziel auch auf schwaecheren Geraeten gut erreichbar.

Wofuer ist will-change gut?

Mit will-change teilst du dem Browser im Voraus mit, welche Eigenschaft sich aendern wird, sodass er eine eigene Ebene vorbereiten kann. Das kann Animationen glaetten, sollte aber sparsam und nur bei tatsaechlich animierten Elementen eingesetzt werden, da jede Ebene Ressourcen bindet.

Kann ich mehrere Animationen auf einem Element kombinieren?

Ja. Du kannst mehrere durch Komma getrennte Animationen in der animation-Eigenschaft angeben, jeweils mit eigener Dauer und Kurve. So laeuft zum Beispiel ein Einblenden parallel zu einer Verschiebung. Achte aber darauf, dass nicht zwei Animationen dieselbe Eigenschaft gleichzeitig steuern.

Warum wirkt meine Animation auf dem Handy traege?

Haeufig liegt es an Layout- oder Paint-Eigenschaften, die auf mobilen Geraeten besonders teuer sind, oder an zu vielen parallelen Effekten. Reduziere die Animationen auf das Wesentliche, nutze transform statt Positions- und Groessenwerten und teste auf einem echten Geraet statt nur am Desktop.