Intent to Prototype: CSS :initial pseudo class

Skip to first unread message

Rune Lillesveen

Feb 3, 2023, 4:31:43 AM2/3/23
to blink-dev

Contact emails




Allow authors to start CSS transitions on first style update CSS transitions do not trigger transitions from initial styles on the first style update for an element, or when the display type changes from 'none' to some other type. That is done to avoid unexpected transitions from initial styles. If the author wants to start a transition from the first style update, that can now be done with the :initial pseudo class. If there is no pre-existing style for an element, but there are selectors with :initial that matches the element, a before-change style is computed with :initial matching before the actual style is computed without :initial matching. Any differences in computed style for transitioned properties will trigger transitions between the styles with and without :initial rules applied. Example which starts a background-color transition from green to lime on the first style update for a div: div { transition: background-color 0.5s; background-color: lime; } div:initial { background-color: green; }

Blink component



Authors who want to start transitions on the first style update need to do two passes using javascript, for instance with a forced update or requestAnimationFrame() by change a class name to get such an effect. With the :initial pseudo class they can start such transitions declaratively in CSS as part of the first style update. This is also specifically motivated by the entry/exit animations use case in the explainer.

Initial public proposal

TAG review

TAG review status



Interoperability and Compatibility

Gecko: No signal

WebKit: No signal

Web developers: No signals

Other signals:

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?


Is this feature fully tested by web-platform-tests?


Flag name

Requires code in //chrome?


Estimated milestones

No milestones specified

Link to entry on the Chrome Platform Status

This intent message was generated by Chrome Platform Status.
Reply all
Reply to author
0 new messages