iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Use CSS @starting-style to give an element an initial style when there is no previous rendered state for a transition to start from. Pair it with a normal rule for the visible state and a transition declaration for the properties you want to animate.
Why a transition may not run when an element appears
A CSS transition normally interpolates between an element’s previous computed style and its new computed style. On first render, there may be no earlier rendered style to transition from. A similar problem occurs when an element changes from display: none to a visible display value.
@starting-style supplies that missing before-change style. It is for CSS transitions; a CSS keyframe animation already defines its own starting keyframe and does not need this at-rule for that purpose. See MDN’s @starting-style reference.
Animate a newly rendered element
Set the destination styles and transition on the regular selector. Then use @starting-style to define the values from which the element should enter.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
.notice {
opacity: 1;
transform: translateY(0);
transition: opacity 180ms ease, transform 180ms ease;
}
@starting-style {
.notice {
opacity: 0;
transform: translateY(0.5rem);
}
}
@media (prefers-reduced-motion: reduce) {
.notice {
transition: none;
}
}The regular rule is the visible destination; the starting rule provides the initial opacity and position. The media query removes the transition for users who request reduced motion. You could instead replace it with a less movement-intensive effect. MDN explains the preference in its prefers-reduced-motion reference.
Choose standalone or nested syntax
MDN documents both forms. A standalone block is useful when you want to keep the initial values separate from the regular rule:
.panel {
opacity: 1;
transition: opacity 200ms;
}
@starting-style {
.panel {
opacity: 0;
}
}You can also nest the at-rule inside the selector whose starting style it supplies:
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
.panel {
opacity: 1;
transition: opacity 200ms;
@starting-style {
opacity: 0;
}
}Starting-style declarations follow the ordinary cascade. For standalone rules with equal specificity, put @starting-style after the regular rule so source order does not override the initial values. Nesting scopes the starting values directly to the selected rule.
Rank #3
- 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
Animate display changes, dialogs, and popovers
display is discrete rather than continuously interpolated. To transition an element between display: none and a visible display value, include display in the transition and allow discrete transitions with transition-behavior: allow-discrete (or the equivalent behavior value in the transition shorthand). The visible display value takes effect at the start of entry; on exit, the element remains rendered until the transition finishes.
For a dialog or popover, use its open-state selector as the destination state, and include the visual properties plus display in the transition. When the element exits the top layer, transition overlay with allow-discrete as well. This delays removal from the top layer until the exit transition ends. See Chrome for Developers’ entry and exit animation examples for implementation patterns.
Keep entry and exit states distinct
The starting style applies to first appearance or a return from display: none; it does not become the element’s ordinary reverse state. On closing, the transition runs from the visible state toward the default or hidden state. Entry and exit can therefore use different timing and properties rather than being forced into a symmetrical effect.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →When to use a different animation technique
- Use
@starting-stylewhen you want a transition between CSS states but the element has no prior rendered state, such as its first appearance. - Use a CSS keyframe animation when the effect is already defined as an animation with keyframes;
@starting-styleis not needed to provide that animation’s initial keyframe. - Consider view transitions for broader DOM changes. Chrome’s article presents them as another technique, not a universally preferable replacement.
Check browser support for your target audience
MDN classifies @starting-style as Baseline 2024 and says it has worked across the latest browser versions since August 2024. Older browsers may not support it. That broad milestone is not a minimum-version guarantee for every browser: check compatibility data against the specific browser versions, embedded webviews, and older devices your project must support. See MDN’s compatibility information.
Quick Recap
Best Value
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.
