::view-transition-new()

Baseline 2025

Newly available

Depuis October 2025, cette fonctionnalité fonctionne sur les appareils et les versions de navigateur les plus récents. Elle peut ne pas fonctionner sur les appareils ou navigateurs plus anciens.

Lepseudo-élément CSS::view-transition-new() représente l'état de vue « new » d'une transition de vue — une représentation instantanée en direct de l'état après la transition.

Lors d'une transition de vue,::view-transition-new() est inclus dans l'arbre des pseudo-éléments associés comme expliqué dansL'arbre des pseudo-éléments de transition de vue. Il est seulement un enfant d'un::view-transition-image-pair(), et n'a jamais d'enfants.

C'est un élément remplacé et peut donc être manipulé avec des propriétés telles queobject-fit etobject-position. Il a des dimensions naturelles égales à la taille du contenu.

Le style par défaut suivant est inclus dans la feuille de style de l'agent utilisateur :

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 pour le mélange lorsqu'il y a 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-in {  from {    opacity: 0;  }}

Note :Des styles de transition de vue supplémentaires sont également configurés pour animer::view-transition-new(). Ceux-ci sont générés dynamiquement pendant la transition de vue ; voir les sectionsconfigurer les pseudo-éléments de transition^(angl.) etmettre à jour les styles des pseudo-éléments^(angl.) de la spécification pour plus de détails.

Syntaxe

css

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

Paramètres

*: Lesélecteur universel (*) ; sélectionne tous les groupes de transition de vue sur une page.
root: Fait correspondre le pseudo-élément au groupe de transition de vue par défautroot créé par l'agent utilisateur pour contenir la transition de vue pour l'ensemble de la page. Ce groupe inclut tout élément non affecté à son propre groupe de capture d'écran de transition de vue spécifique via la propriétéview-transition-name.
<pt-name-selector>: Le<custom-ident> défini comme valeur de la propriétéview-transition-name.
<pt-class-selector>: Le<custom-ident> défini comme valeur de la propriétéview-transition-class précédé d'un point (.).

Exemples

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