CSS-Übergänge

Box-Shadow gab dir ruhige Tiefe. Transitions geben ruhige Veränderung über Zeit: ein Button weicht die Hintergrundfarbe beim Hover, eine Karte hebt sich leicht beim Fokus, eine Linkfarbe gleitet statt zu springen. Du schreibst weiter zwei Zustände — der Browser interpoliert dazwischen für die Dauer, die du setzt.

Was eine Transition ist

Eine Transition erfindet kein neues Aussehen von allein. Sie beobachtet eine Eigenschaft, die sich bereits ändert (oft über :hover, :focus-visible oder eine Klasse) und animiert diese Änderung. Ohne Transition ist der Sprung sofort; mit einer bekommst du ein kurzes, lesbares Gleiten.

Die vier Longhands sind transition-property, transition-duration, transition-timing-function und transition-delay. Im Alltag reicht meist die Kurzschreibweise transition.

Eigenschaft und Dauer

Benenne, was animieren darf, und wie lange die Änderung dauern soll. Dauern sind Zeitangaben (0.2s, 200ms). Kurz und gezielt schlägt theatralisches Warten — UI-Feedback liegt oft bei etwa 150ms–300ms.

Setze die Transition auf die Basisregel, damit sowohl das Eintreten als auch das Verlassen des Hover-Zustands animiert. Liste nur die gemeinten Eigenschaften — sonst rutschen versehentliche Layout-Sprünge eine halbe Sekunde mit.

Timing und Delay

transition-timing-function formt die Geschwindigkeitskurve: ease (Standardgefühl), linear, ease-in, ease-out, ease-in-out oder eigenes cubic-bezier(...). transition-delay wartet vor dem Start — nützlich für gestaffelte Menüs, leicht übertrieben an einem einzelnen Button.

Ease-out fühlt sich für erscheinende UI oft natürlich an. Linear passt zu Fortschritt, der gleichmäßig wirken soll. Delay für bewusste Sequenzen behalten — nicht damit jeder Klick spät wirkt.

Kurzschreibweise und Mehrfach-Motion

Die Reihenfolge in der Kurzform ist typisch: Eigenschaft, Dauer, Timing-Funktion, Delay. Mehrere Transitions mit Kommas trennen. Bevorzuge paint-freundliche Eigenschaften — transform und opacity sind meist glatter als width, height, top oder margin zu animieren.

Hier trifft Tiefe aus der vorherigen Lektion auf Motion: Schatten und Anheben teilen einen Hover-Moment. Den Weg klein halten, damit die Seite solid wirkt.

Reduced Motion und wann Animationen besser passen

Manche Menschen wollen weniger Bewegung. Respektiere prefers-reduced-motion: reduce, indem du nicht essenzielle Transitions kürzst oder abschaltest. Transitions glänzen bei A → B-Zustandswechseln. Schleifen oder Mehrschritt-Geschichten gehören später zu CSS Animations (@keyframes) — nach Transforms.

Selbst ausprobieren

1. Gib einem Button eine 0.2s-Hintergrund-Transition und hovere — verschiebe dann transition von :hover auf die Basisregel und vergleiche das Verlassen des Hovers.
2. Animiere opacity mit ease-out beim Umschalten einer Panel-Klasse; probiere linear und spüre den Unterschied.
3. Kombiniere transform: translateY(...) mit weicherem box-shadow beim Karten-Hover (zwei Eigenschaften, eine Kurzlisten-Schreibweise).
4. Emuliere in den DevTools prefers-reduced-motion: reduce und prüfe, dass nicht essenzielle Motion zurücktritt.
5. Vermeide in dieser Übung das Animieren von height für ein offenes Menü — das Muster später separat.

Typische Fehler

• transition: all 1s schreiben, sodass jede Eigenschaft inklusive Layout eine volle Sekunde gleitet
• Mehrsekündige Dauern, die die UI träge wirken lassen
• width / top / margin animieren, wenn transform oder opacity reichen
• prefers-reduced-motion ignorieren
• Von einer Transition ewiges Loopen erwarten — das ist Animations-Gebiet

Kurzfassung

• Transitions glätten Eigenschaftsänderungen zwischen Zuständen über eine Dauer
• Steuere Eigenschaft, Dauer, Timing-Funktion und Delay (oder nutze transition-Kurzform)
• Kurze Motion auf paint-freundlichen Eigenschaften; Transition auf die Basisregel
• Reduced-Motion respektieren; Keyframe-Animationen für Loops und komplexe Sequenzen
• Als Nächstes in Effects & Motion: Transforms