Summary:
Per CSSWG resolution <https://github.com/w3c/csswg-drafts/issues/6429#issuecomment-1561562367>, the `display` property is now discretely animatable <https://drafts.csswg.org/css-display-4/#display-animation>, in both CSS animations and transitions. The resolution also specifies that an element animating to `display: none` continues running its own animations, while animations on its descendants are cancelled. This lets developers write exit animations entirely in CSS: an element can animate out and then automatically become `display: none`, with no JavaScript needed to flip the property once the animation finishes. Bug: Bug 1834877 <https://bugzilla.mozilla.org/show_bug.cgi?id=1834877>Specification: - css-display-4 <https://drafts.csswg.org/css-display-4/#display-animation> (animation type of display property) - css-animations-2 <https://drafts.csswg.org/css-animations-2/#owning-element-section> Standards Body: CSSWG / W3C Platform coverage: All. Preference: <https://searchfox.org/mozilla-central/source/modules/libpref/init/StaticPrefList.yaml#8340>layout.css.display-animations.enabled (defaults to false) DevTools bug: N/A Extensions bug: N/A Use counter: N/A - wouldn't distinguish animated display from ordinary usage. Standards-Positions Discussion: https://github.com/mozilla/standards-positions/issues/762 Other browsers: - Chrome 117 – shipped <https://groups.google.com/a/chromium.org/g/blink-dev/c/UV9POKsNZA8/m/WCj2GZGXAAAJ> - Safari 18 – shipped <https://webkit.org/blog/15865/webkit-features-in-safari-18-0/> web-platform-tests: - https://wpt.fyi/results/css/css-display/animations <https://wpt.fyi/results/css/css-display/animations?label=master&label=experimental&aligned> - https://wpt.fyi/results/css/css-animations/display-interpolation.html - https://wpt.fyi/results/css/css-animations/display-none-dont-cancel-pseudo.tentative.html - https://wpt.fyi/results/css/css-animations/display-none-dont-cancel.tentative.html - https://wpt.fyi/results/css/css-transitions/CSSTransition-not-canceling.tentative.html -- You received this message because you are subscribed to the Google Groups "[email protected]" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion visit https://groups.google.com/a/mozilla.org/d/msgid/dev-platform/34433ae7-ac9c-4042-b29c-7ad476cd7edan%40mozilla.org.
