@starting-style + transition-behavior: allow-discrete

Baseline 2024 (Chrome 117, Safari 17.5, Firefox 129).

Chrome 117Edge 117Safari 17.5Firefox 129

Erlaubt Transitions von `display:none` und anderen diskreten Properties. `@starting-style` definiert die Werte "vor dem ersten Rendern", damit Eintrittsanimationen funktionieren; `allow-discrete` hält das Element angezeigt, bis die Austrittstransition endet.

Saved. Click anywhere to dismiss.

CSS

.fx-014{
  inset:auto 16px 16px auto;background:#111;color:#fff;padding:12px 16px;border:0;border-radius:10px;font-family:system-ui;
  opacity:0;translate:0 16px;
  transition:opacity .25s,translate .25s,display .25s allow-discrete,overlay .25s allow-discrete;
}
.fx-014:popover-open{opacity:1;translate:0 0}
@starting-style{.fx-014:popover-open{opacity:0;translate:0 16px}}
.fx-014 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

HTML

<button popovertarget="fx-014-toast">Show toast</button>
<div id="fx-014-toast" popover class="fx-014">Saved. Click anywhere to dismiss.</div>

Fallback: Browser ohne Unterstützung zeigen und verstecken sofort; das Popover funktioniert trotzdem.

Quelle: developer.mozilla.org/en-US/docs/Web/CSS/@starting-style

Prompt

Für Ein- und Austrittsanimationen von Elementen, die `display` umschalten, nutze kein JS-Klassen-Timing. Setze den sichtbaren Zustand normal, lege die anfänglichen versteckten Werte für den Eintritt in `@starting-style { .el:open {...} }` und nimm `display .3s allow-discrete` (plus `overlay` für Top-Layer-Elemente) in die Transitionsliste auf, damit die Austrittsanimation abspielen kann, bevor das Element verschwindet.