Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

CSS-Übergänge

Das CSS-Übergänge Modul legt die Funktionalität fest, um allmähliche Übergänge zwischen unterschiedlichen CSS-Property-Werten zu erstellen. Das Verhalten dieser Übergänge kann durch die Angabe ihrer "Easing-Funktion", Dauer und anderer Werte gesteuert werden.

Normalerweise, wenn sich der Wert einer CSS-Property ändert, erfolgt die Änderung vom alten zum neuen Wert sofort. Das CSS-Übergänge Modul ermöglicht es, einen Übergang vom alten Zustand der Property zu dem neuen über einen bestimmten Zeitraum zu steuern. Es bietet auch Ereignishandler, um Code als Reaktion auf verschiedene Übergangsphasen auszuführen.

In bestimmten Fällen gibt es keinen Ausgangswert "from" für einen Übergang. Beispielsweise, wenn ein Element zum DOM hinzugefügt wird, sind die definierten Stile für den "to"-Zustand. Dieses Modul stellt die @starting-style Regel bereit, die es ermöglicht, Startstile für solche Fälle zu definieren. Das Modul definiert auch, wie diskrete Property-Werte übergangen werden sollten, wie zum Beispiel das Übergang der diskret animierten display Property vom none Wert zu einem angezeigten Wert.

Referenz

Properties

At-Regeln

Schnittstellen

Leitfäden

Verwendung von CSS-Übergängen

Schritt-für-Schritt-Anleitung zur Erstellung von Übergängen mit CSS. Dieser Artikel beschreibt jede relevante CSS-Property und erklärt, wie sie miteinander interagieren.

Animation von display

Übergang zu und von dem none Wert der diskret animierten display Property.

Übergang eines Popovers und Übergang eines <dialog>

Beispiele für den Übergang von @starting-style zu endgültigen :popover-open und :open Pseudo-Klasse Stilen.

Verwandte Konzepte

Spezifikationen

Specification
CSS Transitions
CSS Transitions Level 2

Siehe auch