#829: Entry and Exit Animations
Discussions
2023-04-tokyo
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.
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
[Discussed the two trigger moments for @starting-style. Peter to ask a question about the display:none case.]
2024-09-09
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
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
OpenedMar 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 thepopover
attribute.The CSS features include:
transition
property to animate discrete properties likedisplay
. (formerly https://github.com/w3ctag/design-reviews/issues/825) CSSWG issue: https://github.com/w3c/csswg-drafts/issues/4441display
property (formerly https://github.com/w3ctag/design-reviews/issues/824) CSSWG issue: https://github.com/w3c/csswg-drafts/issues/6429@initial
rule, which allows animations to start fromdisplay:none
. CSSWG issue: https://github.com/w3c/csswg-drafts/issues/8174overlay
property, which allows animations on elements entering or leaving the top layer. CSSWG issue: https://github.com/w3c/csswg-drafts/issues/8189@initial
rule: Not specced yetoverlay
property: Not specced yetFurther details:
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]