[view-transitions-1] Have the -image-pair, -old, and -new pseudos inherit animation-delay · Issue #9817 · w3c/csswg-drafts (original) (raw)

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-delay: inherit; }

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

::root:view-transition-group(header) { animation-delay: 1s; }

Without the first code snippet my animations were not in sync: the default fade-in/fade-out on the new/old pseudo ran at the wrong time.

I was surprised that animation-delay: 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 (and animation-fill-mode):

/* UA Stylesheet (selection) / :root::view-transition-group() { animation-duration: 0.25s; }

:root::view-transition-image-pair(*) { animation-duration: inherit; }

:root::view-transition-old(), :root::view-transition-new() { animation-duration: inherit; }

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