Free tools Windows power users keep installed
One-click scans. No signup required.
Use CSS @starting-style to give an element a transition starting value when it has no previous rendered style—for example, when it first appears or becomes visible after display: none. Put the final value in the ordinary rule, the initial value in @starting-style, and define the transition as usual.
What @starting-style does
CSS transitions normally compare an element’s before-change style with its after-change style. If the browser has no previous rendered style to compare—such as when an element is first rendered—there is no ordinary starting point for a transition. The CSS Transitions Module Level 2 Editor’s Draft introduces @starting-style for this case: its declarations provide the missing starting style. See the CSS Transitions Module Level 2 draft and MDN’s reference.
The at-rule supplies starting values; it does not create an animation or replace the destination values. The regular selector defines the destination, and transition says which properties change and how. It is for CSS transitions, not a requirement for CSS keyframe animations.
Transition an element on first render
For example, this card transitions from a slightly lowered, transparent state to its normal position and full opacity:
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
.card {
opacity: 1;
transform: translateY(0);
transition: opacity 180ms ease, transform 180ms ease;
}
@starting-style {
.card {
opacity: 0;
transform: translateY(0.5rem);
}
}The .card rule contains the final values and transition settings. The matching rule inside @starting-style supplies the values to transition from when the card first renders. The example illustrates the documented syntax; it is not a guarantee of behavior in every browser or page context.
Choose standalone or nested syntax
You can write the starting declarations in a standalone at-rule or nest them inside the selector they belong to. Both use the ordinary cascade; neither creates a special priority for starting styles.
Rank #2
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
| Form | When it helps | Cascade consideration |
|---|---|---|
| Standalone | Keeps the starting rule separate, which can help when its selector needs to be written independently, including for pseudo-elements. | If its selector has equal specificity to the destination rule, put the @starting-style block after that rule so source order does not cause the starting declarations to be overridden. |
| Nested | Keeps the starting declarations visually beside the selector’s regular declarations. | The normal cascade still applies; nesting does not give the starting declarations extra precedence. |
Nested example:
.card {
opacity: 1;
transform: translateY(0);
transition: opacity 180ms ease, transform 180ms ease;
@starting-style {
opacity: 0;
transform: translateY(0.5rem);
}
}MDN documents both forms and the source-order consideration for standalone rules in its @starting-style reference.
Handle elements changing from display: none
@starting-style can also provide the starting values when an element changes from display: none to a rendered display value. It does not make display interpolate by itself. Because display is a discrete property, a transition involving it needs an explicit allow-discrete opt-in, and display must be included among the transitioned properties.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallOutdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchFor example, an entry transition can pair an opacity change with the discrete display change:
.panel {
display: none;
opacity: 0;
transition: opacity 180ms ease, display 180ms allow-discrete;
}
.panel.is-open {
display: block;
opacity: 1;
}
@starting-style {
.panel.is-open {
opacity: 0;
}
}Here the ordinary open-state rule supplies the destination values, while the starting rule supplies the opacity origin for rendering the open panel. The allow-discrete behavior is what permits the transition to include display; the at-rule alone does not provide that behavior. See the CSS Transitions Module Level 2 draft.
Rank #4
Transition popovers and other top-layer UI
For a popover, MDN’s example pattern transitions opacity and transform alongside display and overlay, with allow-discrete for the discrete properties. The display transition keeps the popover rendered through the entry or exit transition; transitioning overlay defers removal from the top layer until the transition finishes. A backdrop can have its own standalone starting-style rule. These are additional top-layer transition mechanics, not features that @starting-style provides by itself. Consult the MDN popover example for the relevant pattern.
What happens after the first appearance?
The starting values are not a permanent alternate default. They supply an origin when there was no prior rendered style, including on first render or when an element becomes rendered from display: none. Once the element has a rendered style, later transitions use the ordinary before-change and after-change styles. For instance, after a newly shown element has entered, a later color change transitions from its current ordinary color—not from a starting color declared for its first appearance. MDN illustrates this behavior in its reference examples.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Check browser support
MDN marks @starting-style Baseline 2024, meaning it has worked across the latest devices and browser versions since August 2024; older browser versions may not support it. Its compatibility table lists full support from Chrome 117, Edge 117, Firefox 129, Opera 103, and Safari 17.5. These are version thresholds, not a guarantee that every older device or embedded browser supports the feature. Check the MDN compatibility table for targets you need to support and provide a suitable non-transitioning experience where necessary.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
