`::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 View-Transition-Snapshot-Gruppe.

Während einer View-Transition wird ::view-transition-group() im zugehörigen Pseudoelement-Baum eingefügt, wie in Der View-Transition-Pseudoelement-Baum erklärt. Es ist immer nur ein Kind von ::view-transition und hat ein ::view-transition-image-pair() als Kind.

::view-transition-group() erhält die folgende Standard-Stilvorlage 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 ausgewählte Elemente zunächst die Größe und Position des ::view-transition-old() Pseudoelements wider, das den "alten" View-Status darstellt, oder das ::view-transition-new() Pseudoelement, das den "neuen" View-Status darstellt, falls kein "alter" View-Status existiert.

Wenn sowohl ein "alter" als auch ein "neuer" View-Status existieren, animieren Styles im View-Transition-Stylesheet die width und height dieses Pseudoelements von der Größe des Rahmenfeldes des "alten" View-Status zur Größe des Rahmenfeldes des "neuen" View-Status.

Hinweis: View-Transition-Styles werden während der View-Transition dynamisch generiert; siehe die Spezifikationsabschnitte Setup Transition Pseudo-elements und Update Pseudo-element Styles für weitere Details.

Darüber hinaus wird die Transformation des Elements vom Bildschirm-Transformation des "alten" View-Status zur Bildschirm-Transformation des neuen View-Status animiert. Dieser Stil wird dynamisch generiert, da die Werte der animierten Eigenschaften zu Beginn der Transition bestimmt werden.

Syntax

css

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

Parameter

*: Der Universalselektor (*); wählt alle View-Transition-Gruppen auf einer Seite aus.
root: Der view-transition-name, der auf :root angewendet wird, sorgt dafür, dass das Pseudoelement der Standard-root-View-Transition-Gruppe entspricht. Dies ist die vom Benutzeragenten erstellte Snapshot-Gruppe, die die View-Transition für die gesamte Seite enthält. Diese Gruppe schließt alle Elemente ein, die ihrer eigenen spezifischen View-Transition-Snapshot-Gruppe nicht über die view-transition-name-Eigenschaft zugewiesen sind.
<pt-name-selector>: Der <custom-ident>, der als Wert der view-transition-name-Eigenschaft festgelegt ist.
<pt-class-selector>: Der <custom-ident>, der als Wert der view-transition-class-Eigenschaft festgelegt ist, gefolgt von einem Punkt (.).

Die specificity des benannten View-Transition-Pseudoelements entspricht der Spezifität des Typenselektors, es sei denn, der verwendete Parameter ist der Universalselektor, in welchem Fall die Spezifität null ist.

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;
}