CSS view transitions

The CSS view transitions module defines the behavior of the View Transition API, which allows developers to create animated transitions between different states within a document and across documents. This module also defines the CSS properties and pseudo-elements for styling these transitions.

Reference

Properties

view-transition-name Experimental

Note: This module also defines the view-transition-class property, but it is currently not supported in any browser.

At-rules and descriptors

@view-transition
- navigation descriptor

Selectors and pseudo-elements

::view-transition Experimental
::view-transition-image-pair() Experimental
::view-transition-group() Experimental
::view-transition-new() Experimental
::view-transition-old() Experimental

Note: This module also defines the :active-view-transition and :active-view-transition-type() pseudo-classes, but they are currently not supported in any browser.

Interfaces

Guides

Using the View Transition API: Explains how to create view transitions and customize transition animations, including manipulating active view transitions.

Related concepts

pagereveal event
pageswap event
Document.visibilityState
CSS animations module
CSS transforms module
- transform
- <transform-function>

Specifications

Specification
CSS View Transitions Module Level 1
CSS View Transitions Module Level 2