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

Status: Baseline 2024 (Chrome 117, Safari 17.5, Firefox 129).  
Fonte: https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style  
Página: https://designforai.dev/pt/css/starting-style

Permite transicionar a partir de `display:none` e outras propriedades discretas. `@starting-style` define os valores de "antes da primeira renderização" para as animações de entrada funcionarem; `allow-discrete` mantém o elemento exibido até a transição de saída terminar.

## HTML

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

## CSS

```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; }
```

Fallback: Navegadores sem suporte mostram e escondem instantaneamente; o popover continua funcionando.

## Prompt

Para animações de entrada e saída de elementos que alternam `display`, não use timing de classes em JS. Defina o estado visível normalmente, coloque os valores iniciais escondidos em `@starting-style { .el:open {...} }` para a entrada, e inclua `display .3s allow-discrete` (mais `overlay` para elementos na top layer) na lista de transition para a animação de saída rodar antes de o elemento desaparecer.