@starting-style entrance
Use “Show notice” to open a popover: @starting-style defines the pre-open look, then transition runs into :popover-open (Chromium-first; others may show an instant panel).
Deploy queued
Preview build 482 is rolling out to edge regions.
Baseline 2024+
Quick implementation
.starting-style-card {
transition: opacity 0.35s ease, transform 0.35s …;
}
@starting-style {
.starting-style-card:popover-open {
opacity: 0;
transform: translateY(12px) scale(0.97);
}
}
.starting-style-card:popover-open {
opacity: 1;
transform: translateY(0) scale(1);
}Prompt this to your LLM
Dialogs and menus.
You are animating a popover’s first paint.
Goal: use @starting-style so :popover-open begins at opacity 0 + slight translate/scale, then transitions to fully visible.
Constraints:
- prefers-reduced-motion: fade only, no motion on transform.
- HTML uses popover attribute + popovertarget.
Return HTML + CSS.Why this matters in 2026
Starting-style closes the gap between “display:none-ish” top layers and smooth entry transitions.
The logic
The rule inside @starting-style supplies the first style before the transition interpolates to the open selector.
Accessibility & performance
Test with keyboard and screen readers; keep entrance under ~400ms and respect reduced motion.