view-transition-name
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.
Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.
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
/* 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-nameau même moment, la promesse exposée parViewTransition.readyéchouera et la transition sera ignorée. none-
L'élément cible ne participera pas à la transition de vue.
Définition formelle
| Valeur initiale | none |
|---|---|
| Applicabilité | tous les éléments |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |
Syntaxe formelle
view-transition-name =
none |
<custom-ident>
Exemples
figcaption {
view-transition-name: figure-caption;
}
Spécifications
| Specification |
|---|
| CSS View Transitions Module Level 1 # view-transition-name-prop |
Compatibilité des navigateurs
Chargement…