@starting-style - At-rule CSS
Summary of characteristics of the @starting-style at-rule
Description of the @starting-style at-rule.
The @starting-style at-rule is used to define the initial values of properties involved in a transition. This at-rule is only necessary when the page loads,
or when the element is not displayed when the page appears, such as a dialog box or an element manipulated or created by JavaScript.
In the example below, we have two blocks, initially hidden, that can be displayed by buttons. For the first one, a transition is set on the background color.
You can see that this transition does not start when the block is displayed. The second block also has a transition on the background color, but in addition,
the @starting-style at-rule is used.
The at-rule @starting-style can be used in two ways. Either at the top level: it groups the default styles of several selectors. Or, included in
a selector's block. In this case, it can only define the default styles for that selector.
As a standalone block
@starting-style {
selector {
...
}
selector {
...
}
}
Nestled in another block
selector {
...
@starting-style {
...
}
}
Attention! In all cases, the selectors defined in a @starting-style at-rule have the same specificity as regular selectors.
Therefore, you need to place the block with @starting-style after the other styles; otherwise, it will be consistently overridden.
@starting-style are always overwritten by the values set in the element.
@starting-style is written after the standard styles.@starting-style only applies to CSS transitions. It is not necessary with animations in CSS because the starting and ending values
are defined by the @keyframes at-rule.
Examples of use of the @starting-style at-rule.
Transition to a dialog box.
Dialog boxes built with the dialog tag can undergo a transition when displayed, but here too, the initial values of the properties are not
defined without the @starting-style at-rule.
In this example, we want the dialog box not just to appear on the screen but to seem as if it’s coming from the left of it. The initial position of
the box (before display) should therefore be something negative, for example translate:-100vw;.
Note: here we have used the syntax where @starting-style forms a top-level block.
For more information on the dialog tag, see the page on the pseudo-class selector :popover-open .
Set the default values when the page loads.
When you want to animate an element when the page loads, you need to set the starting values of the properties, with the final values being defined in the element's own styles. Refresh the page if you didn't have time to see the transition.
In this example, an element appears to emerge from nothing and grow to its normal size (property scale). The starting value for scale
is defined by @starting-style, as can be seen in the CSS code.
Browsers compatibility with the @starting-style at-rule.
Compatibility is good on all major browsers, whether on PC, on MacIntosh or mobile.
@starting-style directive, which is used to define the initial values of a transition, including for elements that are not in the DOM at the time the page loads.@starting-styleat-rule
Browsers on computers :
Mobile browsers :
Outdated or marginal browsers :
Internet Explorer
UC Browser pour Androïd
Opéra Mobile
QQ Browser
Baidu Browser
Safari
Samsung Internet
Opéra
Safari sur IOS
Firefox
Firefox pour Androïd
Chrome
Edge
Androïd Brower
Chrome pour Androïd
KaiOS Browser
Opéra mini
Evolution of the @starting-style at-rule.
-
CSS Transitions - Level 2
Level 2 of the specification on transitions adds the ability to apply a transition to a discrete property.
A new at-rule@starting-styleallows defining the starting values for property values. It is now possible to apply a transition to elements that go from the invisible state to the visible state.Regarding@starting-style. Introduction of the@starting-styledirective to address the difficulty of making transitions on elements created after the page has loaded.
September 05, 2023Working Draft.
See also, regarding transitions.
The transitions are defined in the module CSS Transitions, published by W3C, the summary of its content is as follows:
Properties:
discrete.