Skip to content
FrontendHaltFrontendHalt
CSS·Advanced·Coding·1 min read

Why doesn't a CSS transition play when a value is set on initial render?

Short interview answer

A transition only interpolates a property that changes value after the element already exists with a computed starting value; if the 'from' and 'to' state are applied in the same paint, there's no change for it to animate between.

Example

CSS
/* No animation — element is born at opacity: 1 */.toast { opacity: 1; transition: opacity 200ms; }
/* Fix — mount at 0, then flip on next frame (or use @starting-style) */.toast { opacity: 0; transition: opacity 200ms; }.toast.shown { opacity: 1; }

Key takeaway

Explain the underlying mental model clearly, then support it with a concrete example and its trade-offs.

← Back to CSS animations and transitions

Related questions