CSS Fade-Out Animation не работает в примере MDN в FF или Safari ⇐ CSS

[Anonymous]

Любая идея, почему анимация затухания в последнем примере MDN при использовании_CSS_ANIMATIONS не работает? Fade-In работает, когда я щелкну в белое пространство, Div с красной границей исчезает, как и ожидалось, когда я снова нажимаю в белом пространстве, Div внезапно исчезает, исчезновение не оживляется в том, как работает анимация Fade-In. Lang-Js PrettyPrint-Override ">

Код: Выделить всё

const divElem = document.querySelector("div");
const htmlElem = document.querySelector(":root");

htmlElem.addEventListener("click", showHide);
document.addEventListener("keydown", showHide);

function showHide() {
if (divElem.classList[0] === "fade-in") {
divElem.classList.remove("fade-in");
divElem.classList.add("fade-out");
} else {
divElem.classList.remove("fade-out");
divElem.classList.add("fade-in");
}
}< /code>
html {
height: 100vh;
}

div {
font-size: 1.6rem;
padding: 20px;
border: 3px solid red;
border-radius: 20px;
width: 480px;
opacity: 0;
display: none;
}

/* Animation classes */

div.fade-in {
display: block;
animation: fade-in 0.7s ease-in forwards;
}

div.fade-out {
animation: fade-out 0.7s ease-out forwards;
}

/* Animation keyframes */

@keyframes fade-in {
0% {
opacity: 0;
display: none;
}

100% {
opacity: 1;
display: block;
}
}

@keyframes fade-out {
0% {
opacity: 1;
display: block;
}

100% {
opacity: 0;
display: none;
}
}< /code>

Click anywhere on the screen or press any key to toggle the
<div>

between hidden and showing.

This is a

Код: Выделить всё

<div>

element that animates between

Код: Выделить всё

display: none; opacity: 0

and

Код: Выделить всё

display: block; opacity: 1

. Neat, huh?

This is another paragraph to show that

Код: Выделить всё

display: none;

is being
applied and removed on the above

Код: Выделить всё

<div> 

. If only its

Код: Выделить всё

opacity

was being changed, it would always take up the space in
the DOM.




Вот ссылка на воспроизведение. Анимация тоже не работает в этой версии. Он работает в Chrome 138.0.7204.50 (официальная сборка) (x86_64), но не работает в Safari 18.3.1 (19620.2.4.111.9, 19620)

Подробнее здесь: https://stackoverflow.com/questions/796 ... -or-safari