@view-transition

The @view-transition CSS at-rule is used to opt in the current and destination documents to undergo a view transition, in the case of a cross-document navigation.

For a cross-document view transition to work, the current and destination documents of the navigation also need to be on the same origin.

Syntax

css
@view-transition {
  navigation: auto;
}

Descriptors

Specifies the effect this at-rule will have on the document's view transition behavior. Possible values are:

  • auto: The document will undergo a view transition when taking part in a navigation, provided the navigation is same-origin, without cross-origin redirects, and its navigationType is traverse, push, or replace. In the case of push or replace, the navigation must be initiated by a user interacting with the page content, not by a browser UI feature.
  • none: The document will not undergo a view transition.

Formal syntax

@view-transition = 
  @view-transition { <declaration-list> }

Examples

Basic usage

css
@view-transition {
  navigation: auto;
}

You need to specify the above @view-transition at-rule in the CSS for both the current and destination documents of a navigation to opt them in to the view transition.

Note: Our View Transitions MPA demo shows this at-rule in action, and additionally demonstrates how to customize the outbound and inbound animations of the view transition.

Specifications

Specification
CSS View Transitions Module Level 2
# view-transition-rule

Browser compatibility

BCD tables only load in the browser

See also