From 227d420c12d52386f64ca52c829d909e9828d5bb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Th=C3=A9o=20Gianella?= Date: Fri, 17 Apr 2026 09:13:32 +0200 Subject: [PATCH 1/6] fix(docs): remove wrong part of description of custom-ident value in view-transition-class --- .../web/css/reference/properties/view-transition-class/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/reference/properties/view-transition-class/index.md b/files/en-us/web/css/reference/properties/view-transition-class/index.md index ab75b723fd07b4f..437882dd7cad556 100644 --- a/files/en-us/web/css/reference/properties/view-transition-class/index.md +++ b/files/en-us/web/css/reference/properties/view-transition-class/index.md @@ -28,7 +28,7 @@ view-transition-class: unset; ### Values - {{cssxref("custom-ident")}} - - : An identifying name that causes the selected element to participate in a separate [view transition](/en-US/docs/Web/API/View_Transition_API) from the root view transition. The identifier must be unique. If two rendered elements have the same `view-transition-name` at the same time, {{domxref("ViewTransition.ready")}} will reject and the transition will be skipped. + - : An identifying name that causes the selected element to participate in a separate [view transition](/en-US/docs/Web/API/View_Transition_API) from the root view transition. - `none` - : No class would apply to the named view transition pseudo-elements generated for this element. From e992433f783c590dab4248571ed1163bd4423caf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Th=C3=A9o=20Gianella?= Date: Fri, 17 Apr 2026 09:25:14 +0200 Subject: [PATCH 2/6] fix(docs): rephrase custom-ident value description in view-transition-class --- .../web/css/reference/properties/view-transition-class/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/reference/properties/view-transition-class/index.md b/files/en-us/web/css/reference/properties/view-transition-class/index.md index 437882dd7cad556..941b7dd9b50c21d 100644 --- a/files/en-us/web/css/reference/properties/view-transition-class/index.md +++ b/files/en-us/web/css/reference/properties/view-transition-class/index.md @@ -28,7 +28,7 @@ view-transition-class: unset; ### Values - {{cssxref("custom-ident")}} - - : An identifying name that causes the selected element to participate in a separate [view transition](/en-US/docs/Web/API/View_Transition_API) from the root view transition. + - : An identifying name that allows the element to be selected by view transition pseudo-elements in order to apply styles during the transition. - `none` - : No class would apply to the named view transition pseudo-elements generated for this element. From 095f1cb54bc6b1e452a56e2966852af55b4d6daf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Th=C3=A9o=20Gianella?= Date: Fri, 17 Apr 2026 09:35:10 +0200 Subject: [PATCH 3/6] fix(docs): explicitly indicate that view-transition-class supports several values --- .../css/reference/properties/view-transition-class/index.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/files/en-us/web/css/reference/properties/view-transition-class/index.md b/files/en-us/web/css/reference/properties/view-transition-class/index.md index 941b7dd9b50c21d..be88db22fd626b6 100644 --- a/files/en-us/web/css/reference/properties/view-transition-class/index.md +++ b/files/en-us/web/css/reference/properties/view-transition-class/index.md @@ -6,13 +6,14 @@ browser-compat: css.properties.view-transition-class sidebar: cssref --- -The **`view-transition-class`** [CSS](/en-US/docs/Web/CSS) property provides the selected elements with an identifying class (a {{cssxref("custom-ident")}}), providing an additional method of styling the view transitions for those elements. +The **`view-transition-class`** [CSS](/en-US/docs/Web/CSS) property provides the selected elements with one or more identifying classes ({{cssxref("custom-ident")}}s), providing an additional method of styling the view transitions for those elements. ## Syntax ```css /* value examples */ view-transition-class: card; +view-transition-class: card fast-slide; /* Keyword value */ view-transition-class: none; From f2ab5c275d9256b0654d9a988ec09a3fcbed12a1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Th=C3=A9o=20Gianella?= Date: Wed, 6 May 2026 19:28:22 +0200 Subject: [PATCH 4/6] reviews --- .../properties/view-transition-class/index.md | 73 ++++++++++++++++--- 1 file changed, 64 insertions(+), 9 deletions(-) diff --git a/files/en-us/web/css/reference/properties/view-transition-class/index.md b/files/en-us/web/css/reference/properties/view-transition-class/index.md index be88db22fd626b6..7028ede80de180d 100644 --- a/files/en-us/web/css/reference/properties/view-transition-class/index.md +++ b/files/en-us/web/css/reference/properties/view-transition-class/index.md @@ -29,7 +29,7 @@ view-transition-class: unset; ### Values - {{cssxref("custom-ident")}} - - : An identifying name that allows the element to be selected by view transition pseudo-elements in order to apply styles during the transition. + - : An identifying name used to select view transition pseudo-elements for styling. Unlike `view-transition-name`, a class does not need to be unique and does not cause the element to participate in a separate view transition group. - `none` - : No class would apply to the named view transition pseudo-elements generated for this element. @@ -52,21 +52,76 @@ Until the `view-transition-class` property is fully supported in all browsers su ## Examples +### Styling a shared class across multiple elements + +In this example, three cards each have a unique {{cssxref("view-transition-name")}} (required for pairing old and new states), but they all share the same `view-transition-class`. This lets you write a single rule that styles all their transitions at once, rather than repeating styles for each name individually. Unlike `view-transition-name`, a `view-transition-class` does not need to be unique. + +```html +
Card 1
+
Card 2
+
Card 3
+``` + +```css +/* Each element must have a unique view-transition-name */ +#card1 { + view-transition-name: card-1; +} + +#card2 { + view-transition-name: card-2; +} + +#card3 { + view-transition-name: card-3; +} + +/* But they can all share the same view-transition-class */ +.card { + view-transition-class: card; +} + +/* This single rule applies to all three cards' transitions */ +::view-transition-group(.card) { + animation-duration: 0.5s; + animation-timing-function: ease-in-out; +} +``` + +### Using multiple classes on a single element + +A `view-transition-class` value can be a space-separated list of identifiers, letting you compose several "atomic" styles on the same element and target each one independently of your view transition pseudo-elements. In this example, both cards share the same two classes — `slide` controls the animation, and `fast-transition` controls its duration — while each card still has its own unique {{cssxref("view-transition-name")}}. + +```html +
Card 1
+
Card 2
+``` + ```css -::view-transition-group(.fast-card-slide) { - animation-duration: 3s; +.card { + view-transition-class: slide fast-transition; +} + +#card1 { + view-transition-name: card1; +} + +#card2 { + view-transition-name: card2; } -.product { - view-transition-class: fast-card-slide; +/* The `slide` class drives which animation runs... */ +::view-transition-new(.slide) { + animation-name: slide-in; } -.product#card1 { - view-transition-name: show-card; +::view-transition-old(.slide) { + animation-name: slide-out; } -.product#card2 { - view-transition-name: hide-card; +/* ...while the `fast-transition` class drives how long it runs. */ +::view-transition-group(.fast-transition) { + animation-duration: 0.5s; } ``` From ec7ec1425c4416f14319abf46317d6d7577344b7 Mon Sep 17 00:00:00 2001 From: Vadim Makeev Date: Thu, 7 May 2026 13:58:27 +0200 Subject: [PATCH 5/6] Fix mistype --- .../web/css/reference/properties/view-transition-class/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/reference/properties/view-transition-class/index.md b/files/en-us/web/css/reference/properties/view-transition-class/index.md index dec4ef5565e5301..04759ebf0aaeb42 100644 --- a/files/en-us/web/css/reference/properties/view-transition-class/index.md +++ b/files/en-us/web/css/reference/properties/view-transition-class/index.md @@ -39,7 +39,7 @@ view-transition-class: unset; The `view-transition-class` value provides a styling hook, similar to a CSS class name, which can be used to apply the same styles to multiple view transition pseudo-elements. It does not mark an element for capturing. Each individual element still needs its own unique {{cssxref("view-transition-name")}}; the `view-transition-class` is only used as an additional way to style elements that already have a `view-transition-name`. Support for determining the `view-transition-name` automatically is being discussed in the [CSS View Transitions Module Level 2](https://drafts.csswg.org/css-view-transitions-2/#auto-vt-name) spec. -The `view-transition-class` apply styles using the view transition pseudo-elements, including {{cssxref("::view-transition-group()")}}, {{cssxref("::view-transition-image-pair()")}}, {{cssxref("::view-transition-old()")}}, and {{cssxref("::view-transition-new()")}}. This is different from the `view-transition-name`, which matches view transitions between the element in the old state with its corresponding element in the new state. +The `view-transition-class` applies styles using the view transition pseudo-elements, including {{cssxref("::view-transition-group()")}}, {{cssxref("::view-transition-image-pair()")}}, {{cssxref("::view-transition-old()")}}, and {{cssxref("::view-transition-new()")}}. This is different from the `view-transition-name`, which matches view transitions between the element in the old state with its corresponding element in the new state. Until the `view-transition-class` property is fully supported in all browsers supporting view transitions, include a custom `::view-transition-group()` for each element. From 75f814f7c105d036b5a7e97c04dbef76b64a5b6b Mon Sep 17 00:00:00 2001 From: Vadim Makeev Date: Thu, 7 May 2026 13:59:21 +0200 Subject: [PATCH 6/6] Change naming for consistency --- .../css/reference/properties/view-transition-class/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/css/reference/properties/view-transition-class/index.md b/files/en-us/web/css/reference/properties/view-transition-class/index.md index 04759ebf0aaeb42..b3d2705d675299c 100644 --- a/files/en-us/web/css/reference/properties/view-transition-class/index.md +++ b/files/en-us/web/css/reference/properties/view-transition-class/index.md @@ -104,11 +104,11 @@ A `view-transition-class` value can be a space-separated list of identifiers, le } #card1 { - view-transition-name: card1; + view-transition-name: card-1; } #card2 { - view-transition-name: card2; + view-transition-name: card-2; } /* The `slide` class drives which animation runs... */