Skip to main content

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​

  • {{cssxref("view-transition-name")}} {{experimental_inline}}

[!NOTE] This module also defines the view-transition-class property, but it is currently not supported in any browser.

At-rules and descriptors​

  • {{cssxref("@view-transition")}}

Selectors and pseudo-elements​

  • {{cssxref("::view-transition")}} {{experimental_inline}}
  • {{cssxref("::view-transition-image-pair()")}} {{experimental_inline}}
  • {{cssxref("::view-transition-group()")}} {{experimental_inline}}
  • {{cssxref("::view-transition-new()")}} {{experimental_inline}}
  • {{cssxref("::view-transition-old()")}} {{experimental_inline}}

[!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​

  • {{domxref("CSSViewTransitionRule")}}
  • {{domxref("ViewTransition")}}
    • {{domxref("ViewTransition.skipTransition()")}} method
    • {{domxref("ViewTransition.updateCallbackDone")}}
    • {{domxref("ViewTransition.ready")}}
    • {{domxref("ViewTransition.finished")}}
  • {{domxref("Document.startViewTransition()")}} method

Guides​

  • Using the View Transitions API

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

  • {{domxref("PageRevealEvent", "pagereveal")}} event

  • {{domxref("PageSwapEvent", "pageswap")}} event

  • {{domxref("Document.visibilityState")}}

  • CSS animations module

    • {{cssxref("animation")}}
    • {{cssxref("@keyframes")}}
    • {{domxref("CSSKeyframesRule")}}
    • {{domxref("CSSStyleRule")}}
    • Web animations API

  • CSS transforms module

    • {{cssxref("transform")}}
    • {{cssxref("transform-function")}}

Specifications​

See also​