View Transitions: Inherit more animation properties

concepts

1. Inherit Animation Properties

   View transition pseudo-element children now inherit a wider set of animation-* properties from their parent group. Less per-pseudo CSS duplication.

2. Timing Function Cascade

   Live sandbox: pick a timing function and direction on the source element, run the transition, watch the same curve cascade into the pseudo (Chrome 140) instead of getting flattened to linear.

3. 3-curve Tiles

   Three tiles with three different timing functions. Press the toggle and every tile animates with its own curve — no per-pseudo overrides.

4. Property Matrix

   Which animation-* properties inherit through the pseudo tree, version by version. animation-name is the lone holdout — the VT engine assigns the keyframe set itself.

5. Transition Easing Showcase

   A gallery of 6 items with view-transition-names. Switch between grid/list/masonry layouts — the selected easing function (linear, ease-in, ease-out, ease-in-out, custom cubic-bezier) applies via animation-timing-function on ::view-transition-group(*) and cascades to all pseudo-elements. A Before/After toggle shows Chrome 139 (no inheritance) vs Chrome 140.

why it shipped

Similar to https://chromestatus.com/feature/5424291457531904, which inherited animation-delay, this feature adds more animation properties to inherit through the view transition pseudo tree based on resolution in https://github.com/w3c/csswg-drafts/issues/11546#issuecomment-3005503138: * animation-timing-function * animation-iteration-count * animation-di

references

• ChromeStatus entry
• Spec