View transition classes

[hvanops]

Description

This feature introduces a new CSS property view-transition-class which allows the developer to specify one or more view transition classes. The developer can then select the ViewTransition pseudo elements using these classes (e.g. ::view-transition-group(*.class)).

This is an extension to the ViewTransition API that simplifies styling of view transition pseudo elements in a similar way that CSS classes simplify styling of regular DOM elements.

Specification

https://drafts.csswg.org/css-view-transitions-2/#view-transition-class-prop

Additional Signals

Standards Positions
Gecko No information - mozilla/standards-positions#988
WebKit Positive and shipping in STP - WebKit/standards-positions#321

Tests
https://wpt.fyi/results/css/css-view-transitions/parsing?label=experimental&label=master&aligned
https://wpt.fyi/results/css/css-view-transitions (pseudo-with-classes-*)

Browser Bugs
Chromium

Additional Signals
This was originally discussed in w3c/csswg-drafts#8319. A few developers outside of Google showed interest.
Use cases:
List to details view [link] - developers are using JS to achieve this today, but it’s not easy

[captainbrosset]

In preliminary results to the State of CSS 2024 survey, View Transitions came up as the 5th most common answer to the question "Are there any existing CSS features that you have difficulties using (or avoid altogether) because of lack of support, or differences between browsers?".

(can't share a link yet as these are preliminary results)

[wpt-interop]

Thank you for proposing View transition classes for inclusion in Interop 2025.

We are pleased to let you know that this proposal was accepted as part of the View Transitions focus area. You can follow the progress of this focus area on the Interop 2025 dashboard.

For an overview of our process, see proposal selection. Thank you for contributing to Interop 2025!

Posted on behalf of the Interop team.