[css-content-3] Animation of 'content'

[fantasai]

Currently the Animation Type of the content property is “discrete”. However, because the none value can cause the box to disappear when applied to a pseudo-element, this has similar problems to display: none in keyframes, see discussion in https://github.com/w3c/csswg-drafts/issues/6429

The solution we chose for display: none was to replace it with display: revert-layer in keyframes. But that doesn't quite work for content for two reasons:

• content: none on regular elements does not delete the box, only its contents, so it's not necessary to limit it
• content: normal on certain pseudo-elements computes to none, so it needs to be limited also.

Possible options I can think of, none of which seem amazing...

• Both none and normal are excluded from keyframes, and are converted to revert-layer.
• A computed value of none in an animation or transition frame (i.e. that originated in either the Animations or Transitions cascade origins) is converted to "".
• A computed value of none in a keyframe is converted to "" only on the ::before/::after pseudo-elements.
• We make content Not Animatable.
• Something else?

[flackr]

The current direction in #6429 (with an Agenda+ to discuss) is that we allow display: none but continue running the animation until both the animated and base display value is none.

We could do the same here. Keep the animation running as long until both the animated and base content value is none. I believe this is consistent with firefox's current behavior.

[css-meeting-bot]

The CSS Working Group just discussed [css-content-3] Animation of 'content', and agreed to the following:

• RESOLVED: Specify that content:none animates the same way as display:none

The full IRC log of that discussion

<TabAtkins> flackr: 'content' is currently animation type discrete, but has the same issues as display - when "content: none" the pseudo goes away, which can restart the animation
<TabAtkins> flackr: behavior differs - ff seems to keep the animation running, wk/blink seem to stop the animation when it animates to content:none
<TabAtkins> flackr: My latest comment suggests that if possible, follow the same pattern as display, where the animation continues running.
<TabAtkins> flackr: which seems to be consistent with ff impl
<TabAtkins> I agree that being consistent with display would be ideal, since it's basically the exact same case.
<TabAtkins> flackr: I havne't prototyped this yet, I just think it makes the most sense from authoring perspective
<emilio> +1
<TabAtkins> astearns: I like consistency, but that's my entire opinion on this
<TabAtkins> astearns: so proposed reoslution is that we specify content:none animation to match display:none animation
<TabAtkins> astearns: which will continue running the animation, hopefully matching ff behavior
<TabAtkins> flackr: yeah in some demos i wrote (which i didn't post to the issue) you can animate past the none to other value
<TabAtkins> astearns: any concerns?
<TabAtkins> RESOLVED: Specify that content:none animates the same way as display:none