CSS @starting-style At-Rule
The @starting-style at-rule defines starting values for elements that are rendered for the first time or transition from display: none. It enables entry animations without JavaScript.
@starting-style Syntax
@starting-style {
.notice {
opacity: 0;
}
}
.notice {
opacity: 1;
transition: opacity 300ms;
}The starting-style block supplies initial values for properties when an element receives its first rendered style. A transition can then interpolate from those values to the normal style, where the property is transitionable.
How @starting-style Works
A starting style alone does not create animation: the element also needs an appropriate transition declaration. For entry effects involving display, discrete transitions and transition-behavior: allow-discrete may be required.
The @starting-style at-rule defines starting values for elements that are rendered for the first time or transition from display: none. It enables entry animations without JavaScript.
The @starting-style rule defines values to use before an element receives its first rendered style. This lets newly inserted or newly displayed elements animate into their normal state.
Entry Transitions
An element needs a transition on its regular rule. The @starting-style block supplies the initial value for the transition.
A starting style works with a transition declared on the element. For display transitions, discrete-property handling such as transition-behavior: allow-discrete may also be needed.
Nested Form
@starting-style can also be nested inside a style rule, where & refers to the containing selector.
Displaying Elements
Transitions involving display may require transition-behavior: allow-discrete and a discrete display transition. Opacity alone does not change whether an element participates in layout.
@starting-style Example
Check current browser support before using this feature in production, and keep a usable fallback where support is unavailable.
HTML
<button id="show" type="button">Show message</button>
<p class="notice" hidden>This message fades in.</p>CSS
@starting-style {
.notice {
opacity: 0;
}
}
.notice {
opacity: 1;
transition: opacity 300ms;
}To demonstrate the entry transition, remove the hidden attribute when the button is activated; the hidden state must be coordinated with display for an actual transition.
Browser Support
Support varies by feature and browser version. For current compatibility, consult Can I Use? and search for the relevant feature.
Starting styles are not applied on every ordinary state change. Distinguish an element entering rendering from a hover or class change on an element already being rendered.
Specifications
This feature is described in CSS Transitions Level 2.