<dialog>
  <p>This dialog has entry and exit animations.</p>
  <form method="dialog">
    <button>OK</button>
  </form>
</dialog>

<button onclick="document.querySelector('dialog').showModal()">Open Dialog</button>

dialog {
  --duration: 0.34s;

  transition: 
    translate var(--duration) ease-out, 
    scale var(--duration) ease-out,
    filter var(--duration) ease-out,
    display var(--duration) ease-out allow-discrete;

  &[open] {
    translate: 0 0;
    scale: 1;
    filter: blur(0);
    
    @starting-style {
      translate: 0 8vh;
      scale: 1.15;
      filter: blur(8px);
    }
  }

  &:not([open]) {
    translate: 0 -8vh;
    scale: 1.15;
    filter: blur(8px);
  }
}

::backdrop {
  background: none;
}

body,
button {
  font-family: system-ui;
  font-size: 1rem;
}

button {
  padding: 1rem 2rem;
  background: #f06d06;
  color: white;
  font-weight: 600;
  border-radius: 3rem;
  border: none;
}

html {
  background: #333;
}