CSS discrete transitions: keep a closing panel visible long enough to fade

When to use it

A case details region opens and closes from a control that updates the hidden state. The closed rule sets display none and opacity zero; the open rule sets block and opacity one. The transition names display explicitly with allow-discrete, while @starting-style supplies the opening opacity. In a browser without the discrete transition, the panel should still open and close instantly. Test rapid repeated toggles, a keyboard-triggered close, reduced motion, and focus inside the panel at the moment it closes. Application state must move focus to a valid control before a hidden focused child becomes unavailable. CSS cannot decide when a data fetch is complete or whether dismissing the panel loses edits. If the panel uses the top layer, overlay timing may also need its own transition declaration.

.case-detail-panel { display: none; opacity: 0; transition: opacity 200ms ease, display 200ms allow-discrete; }
.case-detail-panel.is-open { display: block; opacity: 1; }
@starting-style { .case-detail-panel.is-open { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .case-detail-panel { transition: none; } }

Cost and verification

The transition can improve visual continuity but does not reduce the work required to lay out the panel. Changing display still affects layout at its switch point, so neighboring content may move; reserve space or use an overlay if that motion is unacceptable. Opacity can briefly create a visible but partly transparent region; verify contrast and focus timing during the transition. A browser that ignores allow-discrete skips the exit fade, which is an acceptable functional fallback. Avoid transition all on a large panel because later property additions can accidentally animate geometry or colors. Profile repeated panels if motion stutters, and do not sacrifice keyboard behavior for a fade.

Common Mistakes

• Do not expect display to interpolate numerically.
• Do not forget @starting-style when entry begins at display none.
• Do not leave focus inside a panel after it becomes hidden.

Connected lessons

• CSS Property Decisions
• CSS @starting-style: define an element's entry state
• CSS transitions and transforms: animate a specific visual property
• CSS reduced motion: remove nonessential movement at the source