demo · v140

Timing Function Cascade

Chrome 140 expands the list of animation properties that ::view-transition-* pseudo-elements inherit from the source element. animation-timing-function, animation-direction, animation-iteration-count, and animation-fill-mode all cascade now — so the bouncy ease you set on a card carries into its in-flight transition.

A

animation-timing-function

Inherited. Pre-140 the pseudo always used linear — your bouncy ease was silently dropped.

animation-direction

Inherited. reverse / alternate finally apply to the transition pseudo.

animation-iteration-count

Inherited. Loops carry through (mostly useful for spinner-style transitions).

animation-fill-mode

Inherited. Affects whether the start/end frame stays painted after the keyframe ends.

.item {
  animation-duration: 600ms;
  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); /* bouncy */
  animation-direction: alternate;
  animation-iteration-count: 1;
  view-transition-name: tile;
}
/* Chrome 140 — the ::view-transition-group(tile) pseudo
   inherits all four properties from the source element above. */

see also