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
CSSStartingStyleRuleCSSTransitiontransitionPropertyEigenschaft
TransitionEventTransitionEvent()KonstruktorTransitionEvent.propertyNameEigenschaftTransitionEvent.elapsedTimeEigenschaftTransitionEvent.pseudoElementEigenschafttransitioncancelEreignistransitionendEreignistransitionrunEreignistransitionstartEreignis
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
noneWert der diskret animiertendisplayProperty. - Übergang eines Popovers und Übergang eines
<dialog> -
Beispiele für den Übergang von
@starting-stylezu endgültigen:popover-openund:openPseudo-Klasse Stilen.
Verwandte Konzepte
-
interpolate-sizeProperty -
calc-size()Funktion -
Intrinsische Größe Glossar-Begriff
-
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
opacityvisibilityViewTransitionSchnittstellePageTransitionEventSchnittstelle