demo · v140

Property Matrix

Which animation-* properties propagate through the view-transition pseudo tree. Chrome 139 inherited duration and delay; 140 adds timing-function, iteration-count, direction, fill-mode, and play-state.

animation-* property	pre-139	v139	v140 (new)
duration	no	inherits	inherits
delay	no	no	inherits
timing-function	no	no	inherits
iteration-count	no	no	inherits
direction	no	no	inherits
fill-mode	no	no	inherits
play-state	no	no	inherits
name	no	no	no (always picked by VT engine)

Note: animation-name is the only one that doesn't inherit; the VT engine assigns the keyframe set itself based on the snapshot type (old, new, image-pair, etc.).

/* All of these now flow into ::view-transition-* pseudos */
.tile {
  animation-timing-function: cubic-bezier(.4,0,.2,1);
  animation-iteration-count: 2;
  animation-direction: alternate;
  animation-fill-mode: backwards;
}

scenario focus

Select a scenario to focus its rendered example and summary.

see also

scenario focus