CSS-Übergänge
Das CSS transitions-Modul beschreibt die Funktionalität zur Erstellung von schrittweisen Übergängen zwischen verschiedenen CSS-Property-Werten. Das Verhalten dieser Übergänge kann durch die Angabe der Beschleunigungsfunktion, der Dauer und anderer Werte gesteuert werden.
Normalerweise, wenn sich der Wert einer CSS-Eigenschaft ändert, erfolgt das Ergebnis des Wechsels vom alten zum neuen Wert sofort. Das CSS transitions-Modul ermöglicht es, einen Übergang vom alten Zustandswert der Eigenschaft zum neuen Zustand über einen angegebenen Zeitraum zu steuern. Es stellt auch Ereignishandler bereit, um Code in Antwort auf verschiedene Phasen eines Übergangs auszuführen.
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 stellt die @starting-style-At-Regel bereit, die es ermöglicht, Ausgangsstile für solche Fälle zu definieren. Das Modul definiert auch, wie diskrete Property-Werte übergehen sollen, wie das Übergang des diskret animierten display-Eigenschaftswerts von none zu einem angezeigten Wert.
Referenz
>Eigenschaften
At-Regeln
Schnittstellen
CSSStartingStyleRuleCSSTransitiontransitionProperty-Eigenschaft
TransitionEventTransitionEvent()-KonstruktorTransitionEvent.propertyName-EigenschaftTransitionEvent.elapsedTime-EigenschaftTransitionEvent.pseudoElement-Eigenschafttransitioncancel-Ereignistransitionend-Ereignistransitionrun-Ereignistransitionstart-Ereignis
Leitfäden
- CSS-Übergänge verwenden
-
Schritt-für-Schritt-Anleitung, die erklärt, 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 Popover und Übergang eines
<dialog> -
Beispiele für Übergänge vom
@starting-stylezum endgültigen:popover-openund:openPseudoklassenstil.
Verwandte Konzepte
-
interpolate-size-Eigenschaft -
calc-size()-Funktion -
Intrinsic size Glossarbegriff
-
CSS-Easing-Funktionen Modul
<easing-function>-Datentyp
-
CSS-Animationen Modul.
-
CSS-Transformationen Modul.
-
CSS-Scroll-Snap Modul
Spezifikationen
| Specification |
|---|
| CSS Transitions> |
| CSS Transitions Level 2> |
Siehe auch
opacityvisibilityViewTransition-SchnittstellePageTransitionEvent-Schnittstelle