<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 {
  transition: opacity 1s ease-in-out, offset-distance 2s ease-in-out,
    display 2s ease-in-out allow-discrete;

  offset-path: path("M66.5,0c0,0-145.1,265.4,184.9,265.4S454.1,0,454.1,0");
  offset-rotate: 0deg;
  translate: -200px -200px;

  &[open] {
    opacity: 1;
    offset-distance: 50%;

    @starting-style {
      opacity: 0;
      offset-distance: 0%;
    }
  }

  &:not([open]) {
    opacity: 0;
    offset-distance: 120%;
  }
}

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