demo · v140

Nested view-transition groups

Click "flip layout". Each card and its badge are independent view-transition groups, but the badge is nested inside the card — so the badge animates within the card's group, not against the whole document. Watch the badges track their cards instead of crossing the page.

A
Card 1
B
Card 2
C
Card 3

The card and its badge each have their own view-transition-name. v140 lets the nested badge group share parent animation properties.

::view-transition-group(card-1) {
  animation-duration: 600ms;
}
::view-transition-group(card-1) ::view-transition-group(badge-1) {
  /* Nested. Inherits parent's group placement. */
}

see also