CSS-Übergänge

CSS-Übergänge ermöglichen es, dass Zustandsänderungen von Elementen (z. B. Farbe, Größe, Position) allmählich und animiert erfolgen, anstatt sofort.

Einfacher Farbwechsel

Mit der Eigenschaft transition kann die Hintergrundfarbe eines Buttons beim Hover-Ereignis allmählich in eine andere Farbe übergehen.

In diesem Beispiel ist die Grundfarbe des Buttons blau, im Hover-Zustand wechselt sie langsam zu grün.

Größenänderung mit Übergang

Übergänge können nicht nur für Farben, sondern auch für Größen verwendet werden. Die Breite und Höhe einer Box kann sich beim Hover allmählich vergrößern.

Transition-Eigenschaften

Eine Transition besteht aus mehreren Untereigenschaften, die die Animation steuern.

Eigenschaft	Beschreibung
transition-property	Legt fest, auf welche CSS-Eigenschaft der Übergang angewendet wird.
transition-duration	Die Dauer des Übergangs in Sekunden oder Millisekunden.
transition-timing-function	Die Geschwindigkeitskurve des Übergangs, z. B. ease, linear, ease-in, ease-out.
transition-delay	Verzögerung vor dem Start des Übergangs.

Tipps für CSS-Übergänge

Die folgenden Tipps helfen dir, CSS-Übergänge effektiv zu nutzen:

Animieren Sie nicht zu viele Eigenschaften gleichzeitig, da dies die Leistung beeinträchtigen kann.
Verwende kurze Dauern, damit die Animation nicht zu langsam wirkt.
Kombiniere Übergänge mit :hover, :focus oder :active für eine bessere Benutzererfahrung.