CSS-Übergänge

Das CSS transitions Modul spezifiziert die Funktionalität zur Erstellung von schrittweisen Übergängen zwischen verschiedenen CSS-Property-Werten. Das Verhalten dieser Übergänge kann durch Angabe der Easing-Funktion, der Dauer und anderer Werte gesteuert werden.

Normalerweise, wenn sich der Wert einer CSS-Eigenschaft ändert, ist das Ergebnis des Wechsels vom alten zum neuen Wert sofort sichtbar. Das CSS-Übergangsmodul ermöglicht die Steuerung eines Übergangs vom alten Zustand einer Eigenschaft zum neuen Zustand über einen festgelegten Zeitraum. Es bietet auch Ereignishandler, die Code ausführen lassen, als Reaktion darauf, dass unterschiedliche Stadien eines Übergangs erreicht werden.

In bestimmten Fällen gibt es keinen ursprünglichen "from"-Wert für einen Übergang. Zum Beispiel, wenn ein Element dem DOM hinzugefügt wird, sind die definierten Styles für den "to"-Zustand. Dieses Modul bietet die @starting-style @-Regel, die es ermöglicht, Startstile für solche Fälle zu definieren. Das Modul definiert auch, wie diskrete Eigenschaftswerte überführt werden sollen, wie das Überführen der diskret animierten display Eigenschaft vom Wert none 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

Verwendung von CSS-Übergängen

Schritt-für-Schritt-Anleitung, wie Übergänge mit CSS erstellt werden. 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 animierten display Eigenschaft.

Übergang eines Popovers und Übergang eines <dialog>

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

Verwandte Konzepte

• interpolate-size Eigenschaft

• calc-size() Funktion

• Intrinsic size Glossareintrag

• CSS-Easing-Funktionen Modul

  • <easing-function> Datentyp

• CSS-Animationen Modul

  • animation Kurzschreibweise
  • 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