Repository navigation
[view-transitions-1] Have the -image-pair, -old, and -new pseudos inherit animation-delay #9817
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.
Activity
astearns commentedon Jan 30, 2024
I see
animation-duration: inheritandanimation-fill-mode: inheritalready defined for these pseudos. Are there any otheranimation-*properties besidesanimation-delaythat should also inherit here?noamr commentedon Jan 30, 2024
It's clear that
-delayneeds to be inherited, but the other ones (direction, iteration-count) can go either way. We'd like to resolve onanimation-delayonly for now.astearns commentedon Jan 31, 2024
The CSSWG will automatically accept this resolution one week from now if no objections are raised here. Anyone can add an emoji to this comment to express support. If you do not support this resolution, please add a new comment.
Proposed Resolution: Add
animation-delay: inheritto the UA stylesheet rules for (::view-transition) -image-pair, -old, and -newastearns commentedon Feb 7, 2024
RESOLVED: Add animation-delay: inherit to the UA stylesheet rules for (::view-transition) -image-pair, -old, and -new
Inherit to the UA stylesheet rules for (::view-transition) -image-pai…
[css-view-transitions-1] Inherit to the UA stylesheet rules for anima…
nt1m commentedon Jun 22, 2025
@noamr @vmpstr It looks like this resolution was never implemented in Chrome with no WPT written for it. (I've just received a WebKit bug report for it: https://bugs.webkit.org/show_bug.cgi?id=294812 ).
cc @emilio who did properly implement it in Gecko however :)
nt1m commentedon Jun 22, 2025
There's a WPT for style inheritance that can probably just be expanded: css/css-view-transitions/style-inheritance.html
nt1m commentedon Jun 23, 2025
WebKit PR: WebKit/WebKit#47049
WPT PR: web-platform-tests/wpt#53316
noamr commentedon Jun 23, 2025
Seems to me like the implementation of this in chromium fell between the cracks... Probably the bot didn't create an issue because the label here doesn't start with
[css-*]@vmpstr ?vmpstr commentedon Jun 23, 2025
The bot didn't parse Alan's uncommon resolved syntax :) I'll manually file an issue
VT: Inherit animation-delay by default.