Top Layer Animations

[josepharhar]

Description

Top Layer Animations is a set of features which makes top layer elements, like <dialog>s and elements with the popover attribute animatable as they enter and exit the top layer:

• The transition-behavior CSS property: https://drafts.csswg.org/css-transitions-2/#transition-behavior-property
• The overlay CSS property: https://drafts.csswg.org/css-position-4/#overlay
• The @starting-style CSS @ rule: https://drafts.csswg.org/css-transitions-2/#defining-before-change-style-the-starting-style-rule
• Supporting animation of the display property: https://drafts.csswg.org/css-display-4/#display-animation

Supporting explainer: https://github.com/chrishtr/rendering/blob/master/entry-exit-animations.md

Now that the popover attribute and dialog element are being implemented and shipped in all browsers, these features are the next step in making them useful for web developers.

Specification

Multiple W3C CSSWG specs

Open Issues

No response

Tests

starting-style: https://wpt.fyi/results/css?label=master&label=experimental&aligned&q=starting-style
overlay: https://wpt.fyi/results/css/css-position/overlay
transition-behavior: https://wpt.fyi/results/css/css-transitions/parsing/transition-behavior.html
display animation: https://wpt.fyi/results/css/css-display/animations/display-interpolation.html

Current Implementations

• Blink
• Gecko
• WebKit

Standards Positions

Gecko:

• Transitions on specified discrete properties mozilla/standards-positions#763
• The overlay CSS property mozilla/standards-positions#777
• @starting-style CSS Rule mozilla/standards-positions#833
• Display and content-visibility animations mozilla/standards-positions#762

WebKit:

• CSS transition-behavior property WebKit/standards-positions#148
• The overlay CSS property WebKit/standards-positions#169
• @starting-style CSS Rule WebKit/standards-positions#210
• Display and content-visibility animations WebKit/standards-positions#147

Browser bug reports

No bugs filed yet that I know of

Developer discussions

No response

Polls & Surveys

No response

Existing Usage

transition-behavior: https://chromestatus.com/metrics/css/timeline/popularity/766
starting-style: https://chromestatus.com/metrics/feature/timeline/popularity/4486
overlay: https://chromestatus.com/metrics/css/timeline/popularity/748

Workarounds

No response

Accessibility Impact

No response

Privacy Impact

No response

Other

No response

[nt1m]

This would be easier to assess split up into 4 different proposals.

[jensimmons]

@foolip @nairnandu Could you see about your team re-proposing this as four separate proposals, so we can discuss them separately.

[josepharhar]

I split this into four proposals:

• The transition-behavior CSS property #580
• The overlay CSS property #581
• The @starting-style CSS rule #582
• Making the display and content-visibility CSS properties animatable #583

[o-t-w]

It's a lot of new concepts just to achieve a relatively simple outcome. I played around with these properties in Canary and found it all a bit overwhelming and confusing tbh. Particularly wanting different transitions for entry and exit seemed overly complex.