Element-scoped view transitions

Category: CSS
Type: New or changed feature
Status: In development (Chrome In development)
Intent stage: None

Summary

Exposes element.startViewTransition() on arbitrary HTML elements. The element establishes a scope for the transition, which means that the transition pseudo-elements are affected by ancestor clips and transforms, and multiple transitions on separate elements can run concurrently.

Motivation

View transitions are currently a "global" document-level concept, which means components cannot use transitions without sacrificing composability. For more details, see the explainer.

Standards & signals

Specification: https://drafts.csswg.org/css-view-transitions-2
Firefox: No signal
Safari: No signal
Web developers: Positive — Top feature request from surveyed web authors re. "what is missing from View Transitions".
Tracking bug: https://issues.chromium.org/issues/394052227

Docs: https://github.com/WICG/view-transitions/blob/main/scoped-transitions.md

Samples: https://output.jsbin.com/runezug/quiet

Explainers: https://github.com/WICG/view-transitions/blob/main/scoped-transitions.md

View on chromestatus.com