CSSViewTransitionRule

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Want more browser support for this feature? Tell us why.

Learn more
See full compatibility

The CSSViewTransitionRule interface represents a CSS @view-transition at-rule.

CSSRule CSSViewTransitionRule

Instance properties

Inherits properties from its ancestor, CSSRule.

navigation Read only: Returns the @view-transition at-rule's navigation descriptor value.
types Read only: Returns an array containing the @view-transition at-rule's types descriptor values.

Instance methods

Inherits methods from its ancestor, CSSRule.

Examples

Basic usage

A stylesheet includes a @view-transition at-rule, with navigation and types descriptors set:

css

@view-transition {
  navigation: auto;
  types: slide, rotate;
}

In script, we grab a reference to the @view-transition at-rule using document.styleSheets[0].cssRules, then log the corresponding CSSViewTransitionRule object and its navigation and types properties to the console. The types property returns an array containing the values set for the types descriptor.

let myRule = document.styleSheets[0].cssRules;
console.log(myRule[0]); // a CSSViewTransitionRule representing the @view-transition at-rule
console.log(myRule[0].navigation); // "auto"
console.log(myRule[0].types); // ["slide", "rotate"]