CSS view transitions

Reference

Properties

• view-transition-class
• view-transition-name
• view-transition-scope

At-rules and descriptors

• @view-transition
  • navigation descriptor

Selectors and pseudo-elements

• :active-view-transition
• :active-view-transition-type()
• ::view-transition
• ::view-transition-image-pair()
• ::view-transition-group()
• ::view-transition-new()
• ::view-transition-old()

Interfaces

• CSSViewTransitionRule
• ViewTransition
  • ViewTransition.skipTransition() method
  • ViewTransition.updateCallbackDone
  • ViewTransition.ready
  • ViewTransition.finished
  • ViewTransition.transitionRoot
• Document.startViewTransition() method
• Document.activeViewTransition
• Element.startViewTransition() method
• Element.activeViewTransition

Guides

Using the View Transition API

Explains how to create view transitions and customize transition animations, including manipulating active view transitions.

Using view transition types

Shows how to use types along with same-document view transitions and cross-document view transitions.

Using element-scoped view transitions

Covers how element-scoped view transitions work, and how to use them.

Related concepts

• pagereveal event

• pageswap event

• Document.visibilityState

• CSS animations module

  • animation
  • @keyframes
  • CSSKeyframesRule
  • CSSStyleRule
  • Web animations API

• CSS transforms module

  • transform
  • <transform-function>

Specifications

See also

• Pseudo-elements
• Functional pseudo-classes
• Learn: Pseudo-classes and pseudo-elements