CSS Animations & Transitions
Entry & Exit Transitions
Animate elements as they enter, leave, or move through the top layer with starting styles and discrete property transitions. It covers first-render transitions, discrete properties, popovers, dialogs, top-layer removal, and reduced-motion handling.
Entry and exit motion needs a defined rendered state; otherwise the browser has no pair of values to interpolate. Starting styles and discrete transitions supply the missing state without keeping hidden content permanently rendered.
Modern CSS can animate elements as they enter or leave even when display and top-layer participation change, provided the starting and discrete states are declared explicitly. This removes the need to keep an invisible element permanently rendered merely to obtain an opacity transition. This topic also connects with CSS Transitions and View Transitions.
Why ordinary transitions miss entry states
A transition needs an old value and a new value. Newly rendered elements and elements returning from display: none do not normally have a rendered starting state, so opacity or transform transitions appear to be skipped.
Define the first rendered state
@starting-style supplies the value used for the first style update. Place it after the rule with the visible state when both rules have equal specificity.
Example
css
.notice {
opacity: 1;
transform: translateY(0);
transition: opacity 200ms, transform 200ms;
}
@starting-style {
.notice {
opacity: 0;
transform: translateY(0.75rem);
}
}Transition discrete properties
Properties such as display change discretely rather than through intermediate values. Use transition-behavior: allow-discrete so the browser can delay the discrete change while interpolated properties finish.
Example
css
[popover] {
opacity: 0;
transform: scale(0.96);
transition:
opacity 180ms,
transform 180ms,
display 180ms allow-discrete,
overlay 180ms allow-discrete;
}
[popover]:popover-open {
opacity: 1;
transform: scale(1);
}
@starting-style {
[popover]:popover-open {
opacity: 0;
transform: scale(0.96);
}
}Entry Transition Reference
| Syntax | Purpose | Example |
|---|---|---|
| @starting-style | Defines the first rendered style. | @starting-style { .item { opacity: 0; } } |
| transition-behavior | Allows discrete properties to participate. | transition-behavior: allow-discrete |
| :popover-open | Selects an open popover. | [popover]:popover-open |
| overlay | Defers removal from the top layer. | transition: overlay 180ms allow-discrete |
Complete Example
Run the complete document below in the Try It editor. Resize the preview or interact with the controls where the example calls for it.
Complete runnable example
html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Entry & Exit Transitions example</title>
<style>
* { box-sizing: border-box; }
body {
margin: 0;
padding: 2rem;
font-family: system-ui, sans-serif;
line-height: 1.5;
}
main { max-width: 70rem; margin-inline: auto; }
article, section, aside, form, .card, .panel {
padding: 1rem;
border: 1px solid #cbd5e1;
border-radius: 0.6rem;
}
.notice {
opacity: 1;
transform: translateY(0);
transition: opacity 200ms, transform 200ms;
}
@starting-style {
.notice {
opacity: 0;
transform: translateY(0.75rem);
}
}
[popover] {
opacity: 0;
transform: scale(0.96);
transition:
opacity 180ms,
transform 180ms,
display 180ms allow-discrete,
overlay 180ms allow-discrete;
}
[popover]:popover-open {
opacity: 1;
transform: scale(1);
}
@starting-style {
[popover]:popover-open {
opacity: 0;
transform: scale(0.96);
}
}
</style>
</head>
<body>
<main><button popovertarget="transition-demo">Open notice</button><div id="transition-demo" popover class="notice">This popover uses entry and exit transitions.</div></main>
</body>
</html>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| @starting-style | 117 | 117 | 129 | 17.5 |
| transition-behavior | 117 | 117 | 129 | 17.4 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8. A partial-support note is included where it changes how the example behaves.
Notes
- Top-layer animation must preserve keyboard behavior, focus handling, and a reduced-motion alternative.
- Test the example with real content, keyboard input, browser zoom, and the narrowest layout your project supports.
- Use a fallback when the support table shows that one of your required browsers predates the feature.
Conclusion
Entry and exit transitions require explicit handling because newly rendered and hidden elements do not have an ordinary previous rendered state. Starting styles provide the entry value, while discrete transition behavior keeps display and top-layer changes synchronized with opacity and transform.
Treat this pattern as state management expressed in CSS: define the hidden state, visible state, starting state, and the exact point at which discrete properties change.