CSS: The Definitive Guide, 5. Auflage

Kapitel 18. Übergänge

Diese Arbeit wurde mithilfe von KI übersetzt. Wir freuen uns über dein Feedback und deine Kommentare: [e-mail]

CSS Übergänge ermöglichen es uns, CSS-Eigenschaften im Laufe der Zeit von einem ursprünglichen Wert zu einem neuen Wert zu animieren. Durch diese Änderungen wird ein Element als Reaktion auf eine Veränderung von einem Zustand in einen anderen überführt. Dies geschieht in der Regel durch eine Benutzerinteraktion, kann aber auch durch eine geskriptete Änderung der Klasse, der ID oder eines anderen Zustands verursacht werden.

Wenn sich der Wert einer CSS-Eigenschaft ändert - wenn also ein Stiländerungsereignis eintritt - erfolgt die Änderung normalerweise sofort. Der neue Eigenschaftswert ersetzt die alte Eigenschaft in den Millisekunden, die nötig sind, um die Seite neu zu zeichnen (oder neu umzufließen und neu zu zeichnen, wenn nötig). Die meisten Wertänderungen scheinen sofort zu erfolgen und benötigen weniger als 16 Millisekunden zum Rendern. Selbst wenn die Änderungen länger dauern (z. B. wenn ein großes Bild durch ein anderes ersetzt wird, das nicht vorgeladen ist - was kein Übergang ist, sondern nur eine schlechte Leistung), ist es immer noch ein einziger Schritt von einem Wert zum nächsten. Wenn du zum Beispiel die Hintergrundfarbe änderst, wenn du mit der Maus darüber fährst, wechselt der Hintergrund sofort von einer Farbe zur anderen, ohne dass es einen allmählichen Übergang gibt.

CSS Übergänge

Mit CSS-Übergängen lässt ...