`::view-transition-old()` 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-old() CSS Pseudoelement repräsentiert den "alten" Ansichtsstatus eines View-Transitions — einen statischen Schnappschuss der alten Ansicht vor der Transition.

Während einer View-Transition ist ::view-transition-old() in dem zugehörigen Pseudoelement-Baum enthalten, wie in Der View Transition Pseudoelement-Baum erklärt wird, vorausgesetzt, es gibt einen darzustellenden "alten" Ansichtsstatus. Es ist immer nur ein Kind von ::view-transition-image-pair() und hat niemals eigene Kinder.

Es handelt sich um ein ersetztes Element und kann daher mit Eigenschaften wie object-fit und object-position manipuliert werden. Es hat natürliche Abmessungen, die der Größe des Inhalts entsprechen.

Die folgende Standardstilierung ist im UA-Stylesheet enthalten:

css

:root::view-transition-old(*),
:root::view-transition-new(*) {
  position: absolute;
  inset-block-start: 0;
  inline-size: 100%;
  block-size: auto;

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

/* Keyframes for blending when there are 2 images */
@keyframes -ua-mix-blend-mode-plus-lighter {
  from {
    mix-blend-mode: plus-lighter;
  }
  to {
    mix-blend-mode: plus-lighter;
  }
}

@keyframes -ua-view-transition-fade-out {
  to {
    opacity: 0;
  }
}

Hinweis: Zusätzliche View-Transition-Stile werden ebenfalls eingerichtet, um ::view-transition-old() zu animieren. Diese werden während der View-Transition dynamisch generiert; sehen Sie sich die Abschnitte setup transition pseudo-elements und update pseudo-element styles in der Spezifikation für weitere Details an.

Syntax

css

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

Parameter

*: Der universelle Selektor (*) wählt alle View-Transition-Gruppen auf einer Seite aus.
root: Verursacht, dass das Pseudoelement der Standard-root-View-Transition-Snapshot-Gruppe entspricht, die vom User-Agent erstellt wird, um die View-Transition für die gesamte Seite zu enthalten. Diese Gruppe umfasst alle Elemente, die nicht über die view-transition-name Eigenschaft einer eigenen spezifischen View-Transition-Snapshot-Gruppe zugewiesen wurden.
<pt-name-selector>: Der <custom-ident>, der als Wert der Eigenschaft view-transition-name gesetzt ist.
<pt-class-selector>: Der <custom-ident>, der als Wert der Eigenschaft view-transition-class vorangestellt mit einem Punkt (.) gesetzt ist.

Beispiele

css

figcaption {
  view-transition-name: figure-caption;
}

@keyframes grow-x {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes shrink-x {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

::view-transition-old(figure-caption),
::view-transition-new(figure-caption) {
  height: auto;
  right: 0;
  left: auto;
  transform-origin: right center;
}

::view-transition-old(figure-caption) {
  animation: 0.25s linear both shrink-x;
}

::view-transition-new(figure-caption) {
  animation: 0.25s 0.25s linear both grow-x;
}

Spezifikationen

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

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