Анимация модального элемента — диалоговое окно переходит в верхнюю часть экрана перед анимацией. ⇐ CSS

[Anonymous]

У меня есть простой модальный элемент, который я анимирую с помощью @starting-style и параметраallow-discreet, установленного при переходе для отображения. Модальное окно анимируется без проблем, но при нажатии кнопки закрытия или Esc модальное окно переходит в верхнюю часть экрана перед анимацией.
Не знаю, что я пропустил, чтобы вызвать такое поведение.
Codepen
Open Modal


DIALOG

Close




dialog {
opacity: 0;
transform: translateY(25rem);

transition: opacity 1s ease-in-out,
transform 1s ease-in-out,
display 1s ease-in-out allow-discrete,
overlay 1s ease-in-out allow-discrete;

color: white;
background-color: black;
border-radius: 2rem;

&[open] {
opacity: 1;
transform: translateY(0rem);

@starting-style {
opacity: 0;
transform: translateY(25rem);
}
}

&::backdrop {
background-color: black;
opacity: 0.5;
}
}



if (document.getElementById("open-modal")) {
const openModalButton = document.getElementById("open-modal");
const modal = document.querySelector(".modal");

openModalButton.addEventListener("click", function onOpen() {
modal.showModal();
});

};



Подробнее здесь: https://stackoverflow.com/questions/798 ... or-to-anim