demo · v140

Cascading Delay

Five rows. The CSS sets a different animation-delay on each row via :nth-child. With 140's inheritance, those delays propagate into the matching ::view-transition-group() pseudos — so the staggered look survives the transition. Pre-140 every row started together.

row 1 — delay 0ms

row 2 — delay 80ms

row 3 — delay 160ms

row 4 — delay 240ms

row 5 — delay 320ms

.row:nth-child(n) { animation-delay: calc((n - 1) * 80ms); view-transition-name: r-#{n}; }

::view-transition-group(*) {
  /* delays are now inherited from the underlying element */
  animation-duration: 600ms;
}

see also