CSS @starting-style: define an element's entry state

Last updated: 5 Oct 20265 min read

tutorial

Transitions normally need a previous rendered style. An element that first appears, or returns from display none, may not have one. @starting-style provides the before-change values used for that entry transition; it does not define a general exit animation.

When to use it

A case notice is inserted after a save. It should appear immediately in older browsers, while supporting browsers may fade it in. The normal rule defines the final state and transition; the starting rule comes later at the same specificity. Keep the notice's message present as ordinary text and send the appropriate announcement through the application's accessibility behavior. Removing the notice still needs its own lifecycle decision: @starting-style alone will not delay removal or create an exit state. Test first insertion, repeated insertion, reduced motion, and a page restored from browser history. If the notice is already in the DOM but hidden with display none, inspect its display transition separately. Motion cannot replace a visible success state, and a save failure must never be painted as success just because the same component class was reused.

.save-notice { opacity: 1; transition: opacity 180ms ease-out; }
@starting-style { .save-notice { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .save-notice { transition: none; } }

Cost and verification

Opacity animation is generally cheaper than repeatedly changing geometry, but a large translucent surface may still cause extra paint or compositing work. Check the actual notice on a low-power device if many notices can appear together. When @starting-style is unsupported, the final opacity remains one, so the message appears without a fade. The order and specificity of the starting rule matter; a later ordinary declaration can defeat it. Keep a stable layout slot or accept the document reflow when the notice is inserted. Reduced-motion handling should remove the transition without hiding or delaying the message. Do not infer that a fade establishes a screen reader announcement or a valid server response.

Common Mistakes

Do not use @starting-style as the exit state.
Do not omit the normal visible rule that serves as fallback.
Do not rely on motion to announce a completed action.

Connected lessons

css

reference

web