我正在尝试使用新的原生功能来动画打开和关闭我的对话框，其中显示属性可以被动画化。（该功能在这里的底部进行了解释）。请注意，目前仅在Chrome，Edge和Opera中支持：see caniuse。
（！）请注意：我意识到我应该使用一些技巧，比如为我的动画设置一个封闭类，并将其与onanimationend事件侦听器配对，然后运行dialog.close()方法。然而，我的问题不是关于这个，而是关于让本机显示无动画工作。
正如你从我的代码片段中看到的，我能够成功地动画化对话框的关闭和打开。更进一步，当打开对话框时，：：background成功地动画化了。然而，出于某种原因，我不明白，当关闭对话框时，：：background没有动画化。这是动画显示属性的bug吗？或者我犯了一个错误？
我试着做另一个淡出关键帧，没有显示值，只用于背景，但它仍然不工作。
我怀疑这与离散动画效果只作用于元素本身而不是子元素或伪元素有关，但我不确定。

const dialog = document.getElementById("dialog")
const open = document.getElementById("open")
const close = document.getElementById("close")

open.onclick = () => dialog.showModal()
close.onclick = () => dialog.close()

dialog {
    background: white;
    color: black;
    padding: 1rem;
    border: unset;
    inset: unset;
    width: unset;
    height: unset;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0.5rem 0 rgba(0,0,0,0.2);
    animation: scale-out 1000ms forwards, fade-out 1000ms forwards;
}
dialog::backdrop {
    background: rgba(0,0,0,0.5);
    animation: test 1000ms forwards;
}

dialog[open] {
    animation: scale-in 1000ms forwards, fade-in 1000ms forwards;
}
dialog[open]::backdrop {
    animation: fade-in 1000ms forwards;
}

@keyframes test {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

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

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes scale-in {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes scale-out {
    0% {
        transform: translate(-50%, -50%) scale(1);
        display: block;
    }
    100% {
        transform: translate(-50%, -50%) scale(0.5);
        display: none;
    }
}

<dialog id="dialog">
  <button id="close">Close</button>
</dialog>

<button id="open">Open</button>