demo · v140

Page Entrance Choreographer

A full mock article page with staggered entrance choreography. Each element carries its own animation-delay in CSS — Chrome 140's pseudo-element inheritance makes the view transition pick those delays up automatically. Drag the sliders to re-choreograph without touching pseudo-element rules.

The Renaissance of Variable Fonts in Modern Web Design

What changed in Chrome 140

Variable fonts allow designers to set any point on a type axis rather than choosing from a limited palette. The font-variation-settings descriptor inside @font-face now bakes those axis positions into the font family definition itself.

Why it matters for page transitions

When a page entrance runs as a view transition, each element animates independently. Staggering their animation-delay values creates a choreographed feel. Before Chrome 140, you had to mirror each delay onto a ::view-transition-group() pseudo selector.

Chrome 140 removed that duplication. The pseudo-element now inherits animation-delay from its source element, so a single CSS rule on the element is enough. The timeline below shows how the delays spread across your content.

Entrance delay diagram

Pre-140 vs Chrome 140 Before Chrome 140, animation-delay set on a source element was NOT inherited by ::view-transition-group(). Every delay had to be duplicated as an explicit ::view-transition-group(name) rule. Chrome 140 inherits the delay automatically — set it once, it propagates.

/* Chrome 140: set delays on elements, pseudos inherit */
.art-headline { animation-delay: 0ms;   view-transition-name: art-headline; }
.art-sub1     { animation-delay: 80ms;  view-transition-name: art-sub1; }
.art-p1       { animation-delay: 160ms; view-transition-name: art-p1; }
.art-sidebar  { animation-delay: 240ms; view-transition-name: art-sidebar; }

/* No ::view-transition-group() delay overrides needed! */

/* Trigger */
document.startViewTransition(() => showArticle());

see also