CSSViewTransitionRule

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

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

undefined

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"]

Specifications

CSS View Transitions Module Level 2