demo · v140

Staggered List

View Transition pseudo-elements (::view-transition-group(*)) now inherit the animation-delay from the source element. Set per-item delays in plain CSS and the in-flight transition staggers automatically — no ::view-transition-group(t1) override blocks needed.

1
2
3
4
5
6
7
8

Each tile carries its own animation-delay via nth-child. With Chrome 140 the pseudo-element inherits that delay, so they ripple instead of crossing in a blob.

pre-140 — every pseudo must be explicit

::view-transition-group(t1) { animation-delay: 0ms; }
::view-transition-group(t2) { animation-delay: 80ms; }
::view-transition-group(t3) { animation-delay: 160ms; }
/* ...one rule per item, doesn't scale */

Chrome 140 — inherit from the source

.tile:nth-child(1) { animation-delay: 0ms; }
.tile:nth-child(2) { animation-delay: 80ms; }
/* pseudo-element inherits from the source element */
/* combine with view-transition-class for whole groups */
.tile { view-transition-class: staggered; }
.tile:nth-child(n) { animation-delay: calc((n - 1) * 80ms); }

/* pre-140 you had to mirror these onto ::view-transition-group()
   pseudo-elements one-by-one; Chrome 140 inherits automatically. */

see also