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.
✨ Frag Lara — deine KI-Lernpartnerin
Entsperre personalisierte Lernunterstützung. Lara kann Lektionen erklären, Themen zusammenfassen und deine Lernfragen beantworten — verfügbar ab dem Go-Tarif.
Lara hilft dir, schneller zu lernen — exklusiv für ReadyTools Go-, Plus- und Max-Mitglieder.
