view-transition-name

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

css

/* <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-name at the same time, ViewTransition.ready will 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

css

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

Specifications

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

Browser compatibility

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet
`view-transition-name`	111	111	No	No	97	No	111	111	No	No	No	22.0

Docs

Docs4dev

Title here