demo · v140

Timing-fn Cascade

Three tiles with three different animation-timing-function values on the source element. Post-140 the timing-function inherits into the VT pseudos — each tile animates with its own curve, in one transition, no per-pseudo overrides.

A

ease-in

B

ease-out

C

overshoot cubic-bezier

.tile.a { animation-timing-function: ease-in; }
.tile.b { animation-timing-function: ease-out; }
.tile.c { animation-timing-function: cubic-bezier(.6,-.28,.74,.05); }

/* These now inherit through into the VT pseudo subtree */
::view-transition-group(tile-a),
::view-transition-group(tile-b),
::view-transition-group(tile-c) { animation-duration: 600ms; }

see also