`::view-transition-image-pair()` CSS pseudo-element

Baseline 2025

Neu verfügbar

Seit October 2025 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.

Das ::view-transition-image-pair() CSS Pseudoelement repräsentiert einen Container für die "alte" und "neue" Ansichtszustände eines View-Übergangs – vor und nach dem Übergang.

Während eines View-Übergangs ist ::view-transition-image-pair() im zugehörigen Pseudoelement-Baum enthalten, wie in Der View-Übergangs-Pseudoelement-Baum erläutert. Es ist immer nur ein Kind von ::view-transition-group(). Bezüglich der Kinder kann es ein ::view-transition-new() oder ein ::view-transition-old(), oder beides haben.

::view-transition-image-pair() erhält die folgende Standard-Stilierung im UA-Stylesheet:

css

:root::view-transition-image-pair(*) {
  position: absolute;
  inset: 0;

  animation-duration: inherit;
  animation-fill-mode: inherit;
  animation-delay: inherit;
}

Während eines View-Übergangs hat ::view-transition-image-pair() isolation: isolate in der View-Übergangs-Stilvorlage gesetzt, damit seine Kinder mit nicht normalen Mischmodi gemischt werden können, ohne andere visuelle Ergebnisse zu beeinflussen.

Syntax

css

::view-transition-image-pair([ <pt-name-selector> <pt-class-selector>? ] | <pt-class-selector>) {
  /* ... */
}

Parameter

*: Der universelle Selektor (*); wählt alle View-Übergangsgruppen auf einer Seite aus.
root: Bewirkt, dass das Pseudoelement mit der Standard-root-View-Übergangs-Snapshot-Gruppe übereinstimmt, die vom User-Agent erstellt wurde, um den View-Übergang für die gesamte Seite zu enthalten. Diese Gruppe umfasst alle Elemente, die nicht über die Eigenschaft view-transition-name einer eigenen spezifischen View-Übergangs-Snapshot-Gruppe zugewiesen sind.
<pt-name-selector>: Der <custom-ident>, der als Wert der Eigenschaft view-transition-name festgelegt ist.
<pt-class-selector>: Der <custom-ident>, der als Wert der Eigenschaft view-transition-class festgelegt ist, vorangestellt von einem Punkt (.).

Beispiele

css

::view-transition-image-pair(root) {
  isolation: auto;
}

::view-transition-image-pair(.card) {
  isolation: isolate;
}

Spezifikationen

Spezifikation
CSS View Transitions Module Level 1 # ::view-transition-image-pair

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

::view-transition-image-pair() CSS pseudo-element