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 by applying styles from within a @starting-style rule. If there is no pre-existing style for an element, but there are selectors inside @starting-style rules that match the element, a style is computed with rules inside @starting-style matching, before the actual style is computed without @starting-style rules matching. Any differences in computed style for transitioned properties will trigger transitions between the styles with and without @starting-style 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; } @starting-style div { background-color: green; } }
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.
Explainers: https://github.com/chrishtr/rendering/blob/master/entry-exit-animations.md