The @starting-style CSS rule

[josepharhar]

Description

The @starting-style CSS rule allows developers to specify styles which apply during the start of a transition. This is necessary in order to make transitions for display:none elements, since display:none elements have to styles to start transitions from. Dialogs and popovers start from display:none when entering the top layer, so this feature is necessary in order to make top layer elements animatable: https://github.com/chrishtr/rendering/blob/master/entry-exit-animations.md

Specification

https://drafts.csswg.org/css-transitions-2/#defining-before-change-style-the-starting-style-rule

Open Issues

No response

Tests

https://wpt.fyi/results/css?label=master&label=experimental&aligned&q=starting-style

Current Implementations

• Blink
• Gecko
• WebKit

Standards Positions

Gecko: mozilla/standards-positions#833

WebKit: WebKit/standards-positions#210

Browser bug reports

No bugs filed yet that I know of

Developer discussions

No response

Polls & Surveys

No response

Existing Usage

https://chromestatus.com/metrics/feature/timeline/popularity/4486

Workarounds

No response

Accessibility Impact

No response

Privacy Impact

No response

Other

No response

[josepharhar]

Original proposal: #495

[dandclark]

This proposal has been accepted as part of Interop 2024! On behalf of the entire Interop team, thank you for proposing it. You’ll be able to track progress on this topic throughout the year via the Interop 2024 dashboard.