[view-transitions-1] Have the -image-pair, -old, and -new pseudos inherit animation-timing-function

[bramus]

(This issue is basically a copy of #9817 adjusted to be about animation-timing-function instead of animation-delay.)

I just caught myself doing this in a project I’m working on:

:root::view-transition-image-pair(*),
:root::view-transition-new(*),
:root::view-transition-old(*) {
  animation-timing-function: inherit;
}

I needed to do this to sync up the animation-timing-function from the ::view-transition-group(x) to its child-pseudos.

::root:view-transition-timing-function(header) {
  animation-timing-function: linear(…);
}

Without the first code snippet my animations were not in sync: the default fade-in/fade-out on the new/old pseudo runs at a different curve.

I was surprised that animation-timing-function: inherit; on the pseudos isn’t part of the UA stylesheet VT styles, especially since the VT UA styles do exactly that for animation-duration + animation-fill-mode + animation-delay:

/* UA Stylesheet (selection) */
:root::view-transition-group(*) {
  … 

  animation-duration: 0.25s;
  animation-fill-mode: both;
}

:root::view-transition-image-pair(*) {
  …

  animation-duration: inherit;
  animation-fill-mode: inherit;
  animation-delay: inherit;
}

:root::view-transition-old(*),
:root::view-transition-new(*) {
  …

  animation-duration: inherit;
  animation-fill-mode: inherit;
  animation-delay: inherit;
}

I think it would be handy to include animation-timing-function: inherit for the -image-pair, -old, and -new pseudos in the UA stylesheet so that setting a timing-function on the -group automatically gets applied on the the child pseudos as well, keeping them all in sync.

[bramus]

In an internal discussion it came up that we should probably inherit all animation longhand properties, save for the animation-name. Adding animation-iteration-count could work, but personally I am not too sure about animation-direction and animation-play-state.

[vmpstr]

I'd prefer we deal with them on a case-by-case basis. animation-timing-function makes sense though.

[vmpstr]

Separately, as you mentioned, we should maybe also inherit animation-play-state. Just ran into a testing issue where we missed the fact that new/old cross faded while we were trying to have the whole thing paused