Element-scoped view transitions

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

Breaking change: No
Enterprise impact: None
Chromium flag: enable-experimental-web-platform-features
Spec maturity: Working draft
Web Platform Tests: Yes

WPT details: WPT directory: css/css-view-transitions/scoped Dashboard link: https://wpt.fyi/results/css/css-view-transitions/scoped?label=experimental&label=master&aligned

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

Ecosystem

Web Platform Tests: https://wpt.fyi/results/?q=css%2Fcss-view-transitions%2Fscoped
Chrome Platform Showcase: https://chrome-platform-showcase.paulkinlan-ea.deno.net/features
GenDN reference: https://gendn.paulkinlan-ea.deno.net/features
chrome.dev demos search: https://www.google.com/search?q=site%3Achrome.dev+Element-scoped%20view%20transitions
MDN Web Docs: https://developer.mozilla.org/en-US/search?q=Element-scoped%20view%20transitions
Baseline status: https://webstatus.dev/?q=Element-scoped%20view%20transitions

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