CSS Transitions: weiche Übergänge richtig einsetzen

Wenn sich ein Button beim Überfahren mit der Maus nicht abrupt umfärbt, sondern sanft seine Farbe wechselt, steckt fast immer eine CSS-Transition dahinter. Transitions sind das vielleicht am häufigsten unterschätzte Werkzeug im Frontend: Sie sind in wenigen Zeilen geschrieben, brauchen kein JavaScript und machen aus statischen Oberflächen wirkende, lebendige Interfaces. In diesem Ratgeber gehe ich die vier zentralen Eigenschaften durch, erkläre den Unterschied zu echten Animationen, zeige welche CSS-Eigenschaften sich überhaupt animieren lassen und gebe dir konkrete Richtwerte für die Dauer typischer Interaktionen.

Was eine Transition eigentlich macht

Eine Transition definiert, wie der Browser den Wechsel zwischen zwei Zuständen einer Eigenschaft darstellen soll. Ohne Transition springt ein Wert sofort von A nach B. Mit Transition rechnet der Browser die Zwischenwerte selbst aus und blendet sie über eine festgelegte Dauer ein. Das passiert immer dann, wenn sich der Wert der angegebenen Eigenschaft ändert, etwa durch einen Hover-Zustand, durch das Setzen einer Klasse per JavaScript oder durch eine Größenänderung.

Wichtig ist das Verständnis, dass eine Transition nichts von selbst startet. Sie wartet passiv darauf, dass sich ein Wert ändert, und übernimmt dann die Inszenierung des Übergangs. Genau das unterscheidet sie von Keyframe-Animationen, dazu später mehr.

Die vier Bausteine: property, duration, timing-function, delay

Eine Transition setzt sich aus bis zu vier Teil-Eigenschaften zusammen, die du einzeln oder gebündelt in der Kurzform transition notieren kannst:

• transition-property – legt fest, welche CSS-Eigenschaft animiert werden soll, zum Beispiel background-color oder transform. Mit dem Wert all werden alle animierbaren Eigenschaften erfasst, was bequem, aber selten die sauberste Wahl ist.
• transition-duration – bestimmt, wie lange der Übergang dauert, angegeben in Sekunden (0.2s) oder Millisekunden (200ms). Ohne Dauer findet kein sichtbarer Übergang statt.
• transition-timing-function – steuert den zeitlichen Verlauf, also ob der Übergang gleichmäßig läuft oder beschleunigt und abbremst. Übliche Werte sind ease, linear, ease-in, ease-out und eigene Kurven über cubic-bezier().
• transition-delay – verzögert den Start des Übergangs um eine bestimmte Zeit. Praktisch für gestaffelte Effekte oder um ein zu nervöses Reagieren bei kurzem Überfahren zu dämpfen.

In der Kurzform schreibt man sie hintereinander, etwa transition: background-color 0.2s ease-out 0s;. Der erste Zeitwert wird stets als Dauer gelesen, der zweite als Delay.

Die richtige timing-function wählen

Die timing-function entscheidet darüber, ob sich eine Bewegung natürlich oder mechanisch anfühlt. Eine lineare Funktion läuft mit konstanter Geschwindigkeit und wirkt oft technisch oder steif. Echte Bewegungen in der physischen Welt beschleunigen und bremsen dagegen, weshalb ease-out für viele Interface-Übergänge die angenehmste Wahl ist: Der Übergang startet schnell und läuft sanft aus, was sich responsiv und reaktionsschnell anfühlt.

• ease-out – ideal für eintretende Elemente und Hover-Effekte, weil die schnelle Anfangsbewegung Reaktionsfreude signalisiert.
• ease-in – passt zu verschwindenden Elementen, die langsam anlaufen und dann zügig verschwinden.
• ease-in-out – gleichmäßig beschleunigend und abbremsend, gut für längere Bewegungen über größere Distanzen.
• cubic-bezier() – für individuelle Kurven, etwa ein leichtes Überschwingen für verspielte Akzente.

Nicht alles ist animierbar

Ein häufiger Stolperstein: Nicht jede CSS-Eigenschaft lässt sich überblenden. Animierbar sind nur Werte, die der Browser interpolieren, also rechnerisch zwischen zwei Zuständen aufteilen kann. Das gilt für Längen, Farben, Transformationen und Deckkraft. Eigenschaften, die nur zwischen festen Zuständen umschalten, springen dagegen hart.

Das prominenteste Beispiel ist display. Ein Wechsel von display: none zu display: block kennt keine sinnvollen Zwischenwerte und lässt sich klassisch nicht weich animieren. Übliche Workarounds:

1. Statt display die Kombination aus opacity und visibility nutzen: Die Deckkraft blendet weich, visibility nimmt das Element am Ende aus der Interaktion.
2. Höhe oder maximale Höhe animieren, um Auf- und Zuklappen zu inszenieren, wobei eine feste Zielhöhe oder max-height nötig ist.
3. Mit transform: scale() oder translate() arbeiten, was zusätzlich performanter ist als das Animieren von Layout-Eigenschaften.

Aus Performance-Sicht lohnt es sich, bevorzugt transform und opacity zu animieren. Diese beiden lassen sich von modernen Browsern besonders effizient verarbeiten, ohne das gesamte Layout neu berechnen zu müssen.

Hover, Focus und Klick flüssig gestalten

Transitions entfalten ihren größten Nutzen bei interaktiven Zuständen. Damit ein Effekt sauber funktioniert, gehört die Transition auf den Ausgangszustand und nicht nur auf den Hover-Zustand. So läuft der Übergang in beide Richtungen weich, also beim Überfahren und beim Verlassen.

Drei Zustände sollten dabei immer mitgedacht werden:

• :hover – das Überfahren mit der Maus, der klassische Fall für Farb- und Schattenwechsel.
• :focus – wichtig für die Tastaturbedienung und Barrierefreiheit; sichtbare Fokus-Zustände dürfen niemals komplett wegoptimiert werden.
• :active – der gedrückte Zustand, der ein haptisches Feedback simuliert, etwa ein leichtes Einsinken per transform.

Ein weiterer Punkt für die Praxis ist die Rücksicht auf Nutzer, die reduzierte Bewegung bevorzugen. Über die Media-Query prefers-reduced-motion lassen sich Übergänge gezielt verkürzen oder abschalten, was sowohl der Barrierefreiheit als auch dem Komfort empfindlicher Nutzer dient.

Transition oder Animation?

Beide Werkzeuge erzeugen Bewegung, verfolgen aber unterschiedliche Zwecke. Eine Transition reagiert auf einen Zustandswechsel und läuft genau einmal von A nach B. Eine Keyframe-Animation über @keyframes und die animation-Eigenschaft ist dagegen ein eigenständiger Ablauf, der von selbst startet, mehrere Zwischenschritte enthalten und beliebig oft wiederholt werden kann.

Als Faustregel: Wenn der Effekt eine direkte Antwort auf eine Nutzeraktion ist, ist eine Transition meist die einfachere und passendere Lösung. Wenn der Effekt unabhängig läuft, sich wiederholt oder über mehrere Stationen führt, etwa ein Ladespinner oder ein pulsierender Hinweis, ist eine Animation richtig.

Richtwerte für die Dauer je Anwendungsfall

Die Dauer entscheidet stark darüber, ob sich ein Interface schnell und reaktiv oder träge anfühlt. Sehr kurze Übergänge unter etwa 100 Millisekunden wirken kaum sichtbar, sehr lange über 500 Millisekunden lassen Oberflächen schwerfällig erscheinen. Als grober Rahmen haben sich Spannen zwischen rund 150 und 400 Millisekunden bewährt, abhängig davon, wie groß die bewegte Distanz oder Veränderung ist. Die folgende Tabelle gibt Orientierung, ersetzt aber kein eigenes Feintuning im realen Layout.

Anwendungsfall	Empfohlene Dauer	timing-function
Button-Hover (Farbe, Schatten)	ca. 150–200 ms	ease-out
Link-Unterstreichung / kleine Akzente	ca. 120–180 ms	ease-out
Menü-Aufklappen (Dropdown)	ca. 200–300 ms	ease-in-out
Bildvergrößerung beim Hover	ca. 300–400 ms	ease-in-out
Modal / Overlay einblenden	ca. 250–350 ms	ease-out
Tooltip erscheinen lassen	ca. 150–250 ms	ease-out

Häufige Fehler und wie du sie vermeidest

Auch bei einer so simplen Technik schleichen sich typische Patzer ein. Die folgenden Punkte tauchen in der Praxis am häufigsten auf:

• transition: all überall – bequem, aber riskant, weil ungewollte Eigenschaften mitlaufen und die Performance leidet. Besser gezielt einzelne Eigenschaften benennen.
• Layout-Eigenschaften animieren – das Animieren von width, height oder top löst Neuberechnungen aus. transform ist meist die ruhigere Alternative.
• Transition nur im Hover-Zustand – dann läuft der Rückweg hart. Die Transition gehört auf den Grundzustand.
• Zu lange Dauer – ab einer halben Sekunde wirkt eine Reaktion zäh. Im Zweifel kürzer wählen.

Häufige Fragen

Warum passiert bei meiner Transition gar nichts?

Meistens fehlt eine Dauer oder die angegebene Eigenschaft ist nicht animierbar. Prüfe, ob transition-duration gesetzt ist und ob du eine interpolierbare Eigenschaft wie opacity, eine Farbe oder transform verwendest. Eigenschaften wie display springen hart.

Wo gehört die transition-Eigenschaft hin, in den Grund- oder den Hover-Zustand?

In den Grundzustand des Elements. Steht sie nur im :hover, läuft der Übergang beim Überfahren weich, beim Verlassen aber abrupt. Im Grundzustand wirkt sie in beide Richtungen.

Welche timing-function ist die beste?

Es gibt keine universell beste Funktion, aber ease-out ist für die meisten Hover- und Einblend-Effekte eine sehr gute Standardwahl, weil die schnelle Anfangsbewegung reaktiv wirkt. Für längere, gleichmäßige Bewegungen passt ease-in-out besser.

Wie animiere ich ein Element, das von display:none auf sichtbar wechselt?

Klassisch kombinierst du opacity und visibility, statt display direkt zu animieren. Die Deckkraft blendet weich, und visibility sorgt dafür, dass das Element am Ende nicht mehr klickbar ist. Alternativ animierst du transform: scale() oder die Höhe.

Brauche ich für Hover-Effekte JavaScript?

Nein. Hover-, Focus- und Active-Zustände lassen sich vollständig mit CSS-Pseudoklassen und Transitions umsetzen. JavaScript wird erst nötig, wenn Zustände durch Logik gesteuert werden, etwa das Öffnen eines Menüs per Klick mit Zustandsspeicherung.

Wie viele Eigenschaften kann ich gleichzeitig animieren?

Beliebig viele, indem du sie durch Komma getrennt in der transition-Eigenschaft auflistest, jeweils mit eigener Dauer und timing-function. Aus Performance-Gründen solltest du dich aber auf das Nötige beschränken und Layout-auslösende Eigenschaften meiden.

Weitere praktische Helfer rund um Code und Webdesign findest du in unseren Webtools. Mehr Ratgeber zu Frontend-Themen sammeln wir im News-Bereich, und einen Überblick über alle Projekte gibt die Startseite.