::view-transition-old()
Baseline
2025
Newly available
Since October 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Das ::view-transition-old() CSS Pseudo-Element repräsentiert den "alten" Ansichtsstatus eines Ansichtsübergangs – ein statisches Abbild der alten Ansicht vor dem Übergang.
Während eines Ansichtsübergangs ist ::view-transition-old() im zugehörigen Pseudo-Element-Baum enthalten, wie im Abschnitt Der Pseudo-Element-Baum des Ansichtsübergangs erklärt, sofern ein "alter" Ansichtsstatus vorliegt, den es darzustellen gilt. Es ist immer nur ein Kind von ::view-transition-image-pair() und hat niemals eigene Kinder.
Es ist 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.
Das folgende Standard-Styling ist im UA-Stylesheet enthalten:
: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 Stile für den Ansichtsübergang werden ebenfalls eingerichtet, um ::view-transition-old() zu animieren. Diese werden während des Ansichtsübergangs dynamisch erzeugt; sehen Sie die Abschnitte zur Spezifikation Einrichten von Übergangspseudo-Elementen und Aktualisieren von Pseudo-Element-Stilen für weitere Details.
Syntax
::view-transition-old([ <pt-name-selector> <pt-class-selector>? ] | <pt-class-selector>) {
/* ... */
}
Parameter
*-
Der Universal-Selektor (
*) wählt alle Ansichtsübergangsgruppen auf einer Seite aus. root-
Veranlasst das Pseudo-Element, mit der Standard-
root-Ansichtsübergangs-Snapshot-Gruppe übereinzustimmen, die vom Benutzer-Agent erstellt wurde, um den Ansichtsübergang für die gesamte Seite aufzunehmen. Diese Gruppe umfasst jedes Element, das nicht über dieview-transition-name-Eigenschaft einer eigenen spezifischen Ansichtsübergangs-Snapshot-Gruppe zugewiesen ist. <pt-name-selector>-
Der
<custom-ident>, der als Wert derview-transition-name-Eigenschaft gesetzt ist. <pt-class-selector>-
Der
<custom-ident>, der als Wert derview-transition-class-Eigenschaft gesetzt und von einem Punkt (.) gefolgt ist.
Beispiele
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
| Specification |
|---|
| CSS View Transitions Module Level 1 # ::view-transition-old |
Browser-Kompatibilität
Loading…