CSS-Transitions

Das CSS-Transitions-Modul spezifiziert Funktionalitäten zur Erstellung schrittweiser Übergänge zwischen verschiedenen CSS-Eigenschaftswerten. Das Verhalten dieser Übergänge kann durch Festlegen der Ease-Funktion, der Dauer und anderer Werte gesteuert werden.

Normalerweise, wenn sich der Wert einer CSS-Eigenschaft ändert, erfolgt das Ergebnis der Änderung vom alten zum neuen Wert sofort. Das CSS-Transitions-Modul ermöglicht das Kontrollieren eines Fortschritts vom alten Zustand der Eigenschaft zum neuen Zustand über einen festgelegten Zeitraum. Es bietet auch Ereignis-Handler, die Code ausführen lassen, als Reaktion auf das Erreichen verschiedener Phasen eines Übergangs.

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 das Definieren von Anfangsstilen für solche Fälle ermöglicht. Das Modul definiert auch, wie diskrete Eigenschaftswerte übergangen werden sollten, wie zum Beispiel das Übergehen der diskret animierten display Eigenschaft vom none-Wert zu einem angezeigten Wert.

Referenz

Eigenschaften

• transition
• transition-behavior
• transition-delay
• transition-duration
• transition-property
• transition-timing-function

At-Regeln

• @starting-style

Schnittstellen

• CSSStartingStyleRule
• CSSTransition
  • transitionProperty Eigenschaft
• TransitionEvent
  • TransitionEvent() Konstruktor
  • TransitionEvent.propertyName Eigenschaft
  • TransitionEvent.elapsedTime Eigenschaft
  • TransitionEvent.pseudoElement Eigenschaft
  • transitioncancel Ereignis
  • transitionend Ereignis
  • transitionrun Ereignis
  • transitionstart Ereignis

Leitfäden

CSS-Transitions verwenden

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

display animieren

Übergänge zu und vom none-Wert der diskret animierten display Eigenschaft.

Übergang eines Popovers und Übergang eines <dialog>

Beispiele für Übergänge von @starting-style zu den finalen :popover-open und :open Pseudo-Klassenstilen.

Verwandte Konzepte

• interpolate-size Eigenschaft

• calc-size() Funktion

• Intrinsic Size Glossar-Term

• CSS-Ease-Funktionen Modul

  • <easing-function> Datentyp

• CSS-Animationen Modul.

  • animation Shorthand
  • animation-delay
  • animation-direction
  • animation-duration
  • animation-fill-mode
  • animation-iteration-count
  • animation-name
  • animation-play-state
  • animation-timing-function

• CSS-Transformationen Modul.

  • transform
  • transform-box
  • transform-origin
  • transform-style

• CSS-Scroll-Snap Modul

  • scroll-snap-type
  • scroll-padding
  • scroll-snap-align
  • scroll-margin
  • scroll-snap-stop

Spezifikationen

Siehe auch

• opacity
• visibility
• ViewTransition Schnittstelle
• PageTransitionEvent Schnittstelle