Description
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.