Skip to content

Latest commit

 

History

History
82 lines (56 loc) · 2.84 KB

index.md

File metadata and controls

82 lines (56 loc) · 2.84 KB
Raw
title slug page-type spec-urls
CSS view transitions
Web/CSS/CSS_view_transitions
css-module

{{CSSRef}}

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 Transition API

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

Related concepts

  • {{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

{{Specifications}}

See also