CSS-Übergänge
Das CSS transitions-Modul spezifiziert Funktionalitäten zum Erstellen von allmählichen Übergängen zwischen verschiedenen CSS-Eigenschaftswerten. Das Verhalten dieser Übergänge kann durch die Angabe der Beschleunigungsfunktion, Dauer und anderer Werte gesteuert werden.
Normalerweise, wenn sich der Wert einer CSS-Eigenschaft ändert, tritt die Änderung vom alten zum neuen Wert sofort ein. Das CSS transitions-Modul ermöglicht die Steuerung eines Übergangs vom alten zum neuen Eigenschaftszustand über einen bestimmten Zeitraum. Es bietet auch Ereignishandler, um Code auszuführen, der als Reaktion auf verschiedene Stadien eines Übergangs erreicht wird.
In bestimmten Fällen gibt es keinen ursprünglichen "Von"-Wert für einen Übergang. Zum Beispiel, wenn ein Element dem DOM hinzugefügt wird, sind die definierten Stile für den "Zu"-Zustand. Dieses Modul bietet die @starting-style-Regel, die es ermöglicht, Anfangsstile für solche Fälle zu definieren. Das Modul definiert auch, wie diskrete Eigenschaftswerte übergehen sollten, wie etwa das Übergang von der diskret animierten display-Eigenschaft vom Wert none zu einem angezeigten Wert.
Referenz
>Eigenschaften
@-Regeln
Schnittstellen
CSSStartingStyleRuleCSSTransitiontransitionPropertyEigenschaft
TransitionEventTransitionEvent()KonstruktorTransitionEvent.propertyNameEigenschaftTransitionEvent.elapsedTimeEigenschaftTransitionEvent.pseudoElementEigenschafttransitioncancelEreignistransitionendEreignistransitionrunEreignistransitionstartEreignis
Leitfäden
- Verwendung von CSS-Übergängen
-
Schritt-für-Schritt-Anleitung, wie man Übergänge mit CSS erstellt. Dieser Artikel beschreibt jede relevante CSS-Eigenschaft und erklärt, wie sie miteinander interagieren.
- Animation von
display -
Übergang zu und von dem
none-Wert der diskret animiertendisplay-Eigenschaft. - Übergang eines Popovers und Übergang eines
<dialog> -
Beispiele für den Übergang von
@starting-stylezu finalen:popover-openund:openPseudo-Klassen-Stilen.
Verwandte Konzepte
-
interpolate-sizeEigenschaft -
calc-size()Funktion -
Intrinsische Größe Glossarbegriff
-
CSS-Beschleunigungsfunktionen Modul
<easing-function>Datentyp
-
CSS-Animationen Modul.
-
CSS-Transformationen Modul.
-
CSS-Scroll-Snap Modul
Spezifikationen
| Specification |
|---|
| CSS Transitions> |
| CSS Transitions Level 2> |
Siehe auch
opacityvisibilityViewTransitionSchnittstellePageTransitionEventSchnittstelle