Repository navigation
[css-contain-4] Make content-visibility animatable #8627
Description
css-contain Section 4 currently defines the content visibility property to be Animation type: not animatable. Most likely this was done for simplicity since like display it can affect which animations are running. However, as with display where we are better refining the ways in which it is safe to animate (See #6429), we should figure out in which ways content-visibility can be animated.
In particular, just like display it should be possible for an animation to extend the application of content-visibility: visible in order to allow content to stay visible while an animation is completing. This would be useful for elements like <details> whose contents are content-visibility: hidden when closed.
Activity
chrishtr commentedon Mar 21, 2023
content-visibilitywas mentioned here, but we just reailzed it wasn't explicitly covered during the CSSWG agenda on the topic. I don't think it will be at all controversial, so propose an async resolutionflackr commentedon Mar 21, 2023
My simple proposal would be that
autoandhiddenare both not allowed by owned animations (e.g. CSS animations), and these two values would be treated as revert, as either of these values could result in a CSS animation no longer running. We would also prefer thevisiblevalue in interpolation - consistent with our resolution to avoidnoneindisplayinterpolations.astearns commentedon Mar 29, 2023
@flackr can you put a bit more detail into your proposal? I am not entirely sure how to summarize the above for an async resolution.
flackr commentedon Mar 30, 2023
The three main points are:
autoandhidden. Meaning that when interpolating to/fromvisiblethe interpolated result for any intermediate progress isvisible.autoandhiddenasrevert.astearns commentedon Apr 4, 2023
Thanks for explaining further. This seems like a good thing to get in the spec for more review.
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: Make content-visibility animateable as above
astearns commentedon Apr 11, 2023
RESOLVED: Make content-visibility animateable as above
[css-contain-3] Make content-visibility animatable.
[css-contain-3] Make content-visibility animatable. (#8737)
[css-contain] Move info on content-visibility animations from L3 to L2