#829: Entry and Exit Animations

Visit on Github.

Opened Mar 29, 2023

こんにちは TAG-さん!

I'm requesting a TAG review of Entry and Exit Animations. I am using one TAG issue for these features because they are used together to accomplish an important use case.

Entry and Exit Animations is a set of CSS features which makes it possible to animate elements to and from display:none, and to animate elements entering and leaving the top layer, like <dialog> and elements with the popover attribute.

The CSS features include:

  1. CSS transitions for discrete properties, which allows the transition property to animate discrete properties like display. (formerly https://github.com/w3ctag/design-reviews/issues/825) CSSWG issue: https://github.com/w3c/csswg-drafts/issues/4441
  2. CSS transitions and animations for the display property (formerly https://github.com/w3ctag/design-reviews/issues/824) CSSWG issue: https://github.com/w3c/csswg-drafts/issues/6429
  3. CSS @initial rule, which allows animations to start from display:none. CSSWG issue: https://github.com/w3c/csswg-drafts/issues/8174
  4. CSS overlay property, which allows animations on elements entering or leaving the top layer. CSSWG issue: https://github.com/w3c/csswg-drafts/issues/8189

Further details:

  • I have reviewed the TAG's Web Platform Design Principles
  • Relevant time constraints or deadlines: We are trying to ship this in Chrome 114 which branches on April 20th and goes to stable on May 30th
  • The group where the work on this specification is currently being done: CSSWG
  • The group where standardization of this work is intended to be done (if current group is a community group or other incubation venue): CSSWG
  • Major unresolved issues with or opposition to this specification: none
  • This work is being funded by: Google

We'd prefer the TAG provide feedback as (please delete all but the desired option):

💬 leave review feedback as a comment in this issue and @-notify [github usernames]

Discussions

2023-04-tokyo

Minutes

Lea: WRT csswg-drafts/#4441 very glad they resolved the way they did instead of adding extra syntax. This is intuitive for authors, does not require learning anything else, and performant for UAs, win-win.

...: WRT csswg-drafts/#6429, this seems reasonable, but we see there is a lot of discussion after the resolution to adopt this proposal. Are the details still being fleshed out? If so, is it a good time for shipping this?

...: Note, dialog example explainer has a bug, step-end will only work one way.

... WRT csswg-drafts/#8174, agree that use case should be solved. A bit concerned that initial would be confused with the initial keyword, which is an entirely separate concept. Agree with @nt1m that this seems designed around browser engine internals rather than concepts web developers understand. Agree that there should be a way to animate newly inserted elements that does not also animate them if they are present when the page loads. Missing an actual definition for this @initial rule that people started talking about at some point.

Yves: Definition in https://github.com/w3c/csswg-drafts/issues/8174

Lea: That's the one I was looking at. Discussion goes from :initial to @initial but I cannot see any proposal or strawman for the latter.

Yves: Would be good to have a concrete proposal for @initial (or whatever name is chosen)

... WRT csswg-drafts/#8389, inert CSS property seems useful, and explaining HTML inert attribute in terms of that is good practice. Unfortunate it was resolved against, as now developers have no means of opting out of this behavior, but this is better than not having the behavior at all.

<blockquote>

Hi @josepharhar,

@ylafon and I spent quite some time during our Tokyo F2F looking at the various issues, and the explainer.

Overall we like the direction that this is going. Designing a solution to this problem as small independent improvements on existing features that can together be leveraged for entry and exit animations is a good practice.

We also like that existing transition syntax could be leveraged to do the right thing, rather than introducing new syntax. We see discussion went from :initial to @initial due to specificity issues (?), but we could not find a definition of what @initial is/does. We are also concerned that the name will be confusing for authors, as initial is an existing, unrelated concept in CSS (initial values).

Making transitions to display: none inert seems preferable, though it is unfortunate the inert property was resolved against, and thus authors can not opt out or use this behavior for other use cases.

For some of these issues (e.g. 6429) there seemed to be still active discussion after any resolutions, making us wonder if shipping this might be a little premature.

</blockquote>
2024-03-18

Minutes

[Discussed the two trigger moments for @starting-style. Peter to ask a question about the display:none case.]

2024-08-26

Minutes

Dan: I think we need Lea here...

2024-09-09

Minutes

JeffreyL: we were waiting on a plenary discussion but Lea thumbs-upped it.

Dan: can we close based on the text we wrote above?

closed

2024-09-09

Minutes

Jeffrey: It's been a long time .. it's in "interop 2024"... agreement between 3 browser engines to focus on interop on certain features... no arch issues raised. Dbaron mentioned offline that he's not happy with some details but that's something CSS wg can focus on. so Nothing for us to do here.

Dan: I'm happy with that...

Dan: let's check with Lea before closing - we can close at plenary.

Yves: also - the issues raised in CSS wg for that were closed...

<blockquote>

We see that the browsers have agreed to focus on implementing these features as part of Interop 2024. While some of the details may still not be optimal, we don't think there are any architectural concerns, and we think the CSSWG is the right place to continue refining the design, if necessary. Thank you for bringing us this review!

</blockquote>

Closed as satisfied at plenary