view-transition-name

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Expérimental: Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La propriété CSS view-transition-name fournit un nom d'identification (une valeur <custom-ident>) à l'élément ciblé pour qu'il participe à une transition de vue différente de la transition racine, ou ne suive pas la transition de vue si c'est la valeur none qui est utilisée.

Syntaxe

css
/* Exemples de valeurs <custom-ident> */
view-transition-name: header;
view-transition-name: figure-caption;

/* Valeurs avec un mot-clé */
view-transition-name: none;

Valeurs

<custom-ident>

Un nom distinct et unique qui indique que l'élément ciblé participera à une transition de vue séparée de la transition de vue racine. L'identifiant doit être unique. Si deux éléments affichés ont la même valeur view-transition-name au même moment, la promesse exposée par ViewTransition.ready échouera et la transition sera ignorée.

none

L'élément cible ne participera pas à la transition de vue.

Définition formelle

Valeur initialenone
Applicabilitétous les éléments
Héritéenon
Valeur calculéecomme spécifié
Type d'animationdiscrète

Syntaxe formelle

view-transition-name = 
none |
<custom-ident>

Exemples

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

Spécifications

Specification
CSS View Transitions Module Level 1
# view-transition-name-prop

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
view-transition-name
none

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

Voir aussi