View transition pseudos inherit animation-delay.

concepts

1. Inherit animation-delay

   animation-delay now propagates from view-transition group to its children, matching the rest of the animation-* inheritance.

2. Staggered List

   The whole reason for the inheritance: stagger an 8-tile shuffle by setting per-item animation-delay in CSS. No per-pseudo override blocks needed.

3. Cascading Delay

   Five rows, each with a per-row animation-delay. The cascade survives into the transition pseudos so the stagger reads on the animation too.

4. Inheritance Tree

   The four-level pseudo tree visualised pre and post 140. Toggle the Chrome version to see animation-delay propagate down the chain.

5. Page Entrance Choreographer

   A mock article page with headline, subheadings, paragraphs, sidebar, and footer — each with a view-transition-name. Click "Enter page" to trigger staggered entrance via inherited animation-delay. Drag per-element delay sliders to re-choreograph the entrance. Four preset choreographies: slide-up, fade cascade, left-to-right sweep, center-out ripple.

why it shipped

View Transitions project adds a tree of pseudo elements that have various animations applied to them. For ease of development and customization some niceties are provided, such as inheriting animation-duration. This feature adds another nicety: inherit animation-delay.

references

• ChromeStatus entry
• Spec