view-transition-name
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The view-transition-name CSS property provides the selected element with a distinct identifying name (a <custom-ident>) and causes it to participate in a separate view transition from the root view transition — or no view transition if the none value is specified.
Syntax
/* <custom-ident> value examples */
view-transition-name: header;
view-transition-name: figure-caption;
/* Keyword value */
view-transition-name: none;
Values
<custom-ident>-
A distinct identifying name that causes the selected element to participate in a separate view transition from the root view transition. The identifier must be unique. If two rendered elements have the same
view-transition-nameat the same time,ViewTransition.readywill reject and the transition will be skipped. none-
The selected element will not participate in a view transition.
Formal definition
| Initial value | none |
|---|---|
| Applies to | all elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |
Formal syntax
view-transition-name =
none |
<custom-ident>
Examples
figcaption {
view-transition-name: figure-caption;
}
Specifications
| Specification |
|---|
| CSS View Transitions Module Level 1 # view-transition-name-prop |
Browser compatibility
| desktop | mobile | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
view-transition-name | |||||||||||
none | |||||||||||