`::view-transition-group()` 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-group() CSS Pseudoelement repräsentiert eine einzelne Ansichtstransitions-Snapshot-Gruppe.

Während einer Ansichtstransition ist ::view-transition-group() im zugehörigen Pseudoelement-Baum enthalten, wie im Abschnitt Der Ansichtstransition-Pseudoelement-Baum erklärt. Es ist immer nur ein untergeordnetes Element von ::view-transition und hat ein ::view-transition-image-pair() als untergeordnetes Element.

::view-transition-group() erhält die folgende Standardstilierung im UA-Stylesheet:

css

:root::view-transition-group(*) {
  position: absolute;
  top: 0;
  left: 0;

  animation-duration: 0.25s;
  animation-fill-mode: both;
}

Standardmäßig spiegeln die ausgewählten Elemente zunächst die Größe und Position des ::view-transition-old() Pseudoelements wider, das den "alten" Ansichtsstatus repräsentiert, oder des ::view-transition-new() Pseudoelements, das den "neuen" Ansichtsstatus repräsentiert, falls kein "alter" Ansichtsstatus vorhanden ist.

Wenn sowohl ein "alter" als auch ein "neuer" Ansichtsstatus vorhanden ist, animieren Stile im Ansichtstransitions-Stylesheet die width und height dieses Pseudoelements von der Größe des Border-Box des "alten" Ansichtsstatus zu der des "neuen" Ansichtsstatus.

Hinweis: Ansichtstransitionsstile werden während der Ansichtstransition dynamisch generiert; siehe die Spezifikation Übergangs-Pseudoelemente einrichten und die Abschnitte Pseudoelementstile aktualisieren für weitere Details.

Darüber hinaus wird die Transformation des Elements vom Bildschirmraum-Transform des "alten" Ansichtsstatus zum neuen Bildschirmraum-Transform animiert. Dieser Stil wird dynamisch generiert, da die Werte der animierten Eigenschaften zu dem Zeitpunkt bestimmt werden, an dem die Transition beginnt.

Syntax

css

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

Parameter

*: Der universale Selektor (*); wählt alle Ansichtstransitionsgruppen auf einer Seite aus.
root: Die view-transition-name, die auf :root angewendet wird, bewirkt, dass das Pseudoelement mit der Standard-root-Ansichtstransitionsgruppe übereinstimmt. Dies ist die Snapshot-Gruppe, die vom Benutzeragenten erstellt wurde, um die Ansichtstransition für die gesamte Seite zu enthalten. Diese Gruppe umfasst jedes Element, das nicht über die Eigenschaft view-transition-name einer eigenen spezifischen Ansichtstransitions-Snapshot-Gruppe zugewiesen ist.
<pt-name-selector>: Der <custom-ident>, der als Wert der view-transition-name Eigenschaft gesetzt ist.
<pt-class-selector>: Der <custom-ident>, der als Wert der view-transition-class Eigenschaft gesetzt ist, vorangestellt durch einen Punkt (.).

Die Spezifität des benannten Ansichtstransition-Pseudoelements entspricht der Spezifität des Typselektors, es sei denn, der verwendete Parameter ist der universelle Selektor, in diesem Fall beträgt die Spezifität null.

Beispiele

css

::view-transition-group(embed-container) {
  animation-duration: 0.3s;
  animation-timing-function: ease;
  z-index: 1;
}

::view-transition-group(.card) {
  animation-duration: 1s;
}

Spezifikationen

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

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-group() CSS pseudo-element