view-transition-name

The view-transition-name CSS property specifies the view transition snapshot that selected elements will participate in. This enables you to animate those elements separately from the rest of the page, which uses the default cross-fade animation during a view transition. You can then define custom animation styles for these elements.

By default, when a view transition is applied to a web app, all changes to the UI that occur during that transition are snapshotted and animated together. This is the default — or root — snapshot (see The view transition pseudo-element tree). By default, this animation is a smooth cross-fade, which can be seen in action in the View Transitions SPA demo.

Syntax example: view-transition-name: header;