demo · v140

Easing Showcase

Chrome 140 extends view transition pseudo-element inheritance to animation-timing-function, animation-fill-mode, and animation-play-state. Pick an easing, switch gallery layouts — the curve you set on the source elements propagates into the transition pseudos automatically.

Layout:
Easing:
VT: checking… Current easing: linear
linear
Constant rate throughout. No acceleration or deceleration. The animation value changes by the same amount each frame.

animation-fill-mode — also inherited in Chrome 140

none: element returns to pre-animation state before and after. Default view transition behaviour.

/* Chrome 140: these properties now inherit through the VT pseudo tree */ .gallery-item { /* Set timing function on the source — inherits into ::view-transition-group() */ animation-timing-function: ease-in-out; /* fill-mode also inherited — controls behavior before/after the anim */ animation-fill-mode: both; /* play-state inherited too — pause all VT animations at once */ animation-play-state: running; } /* No need to repeat these on each pseudo: */ /* ::view-transition-group(g1) { animation-timing-function: ease-in-out; } */ /* ::view-transition-group(g2) { animation-timing-function: ease-in-out; } */ /* ... */ /* Chrome 139 required this duplication — Chrome 140 inherits automatically */

Chrome 139 — inheritance ignored

/* Timing function on element was NOT
   inherited by the VT pseudo subtree */
.item { animation-timing-function: ease-in; }

/* Had to duplicate on every pseudo: */
::view-transition-group(g1),
::view-transition-group(g2),
::view-transition-group(g3) {
  animation-timing-function: ease-in;
}

Chrome 140 — full inheritance

/* Set once on the source element */
.item { animation-timing-function: ease-in; }

/* The pseudo-element group inherits it.
   Works for: animation-timing-function,
              animation-fill-mode,
              animation-play-state.
   Note: animation-name is still assigned
   by the VT engine itself. */
/* Three newly-inherited properties in Chrome 140 */
.gallery-item {
  view-transition-name: g1; /* …g2, g3, etc. */
  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  animation-fill-mode: both;
  animation-play-state: running;
}

/* Trigger the transition — easing, fill, play-state all cascade in */
document.startViewTransition(() => switchLayout());

see also