如何使用javascript和css在消息弹出窗口上设置动画或使用转换？

我目前有消息显示和消失，因为我想，但过渡是不工作，这是我尝试

const alertMsg=document.querySelector（'.alert'）；
contactForm.addEventListener（“提交”，FormSubmited）；
功能表（e）{
//其他东西
alertMsg.style.display='block'；
设置超时（（）=>{
alertMsg.style.display='none'；
}, 5000);
}

.alert{
过渡：所有0.5s缓解；
}

---

您的消息已发送，我会尽快回复您。

您无法转换（或设置）显示属性。

display

属性处于打开或关闭状态，没有任何要转换或设置动画的内容

您可以做的是设置不透明度的动画，并在开始和结束时更改显示属性

比如：

@keyframes showBlock {
    from { display: block; opacity: 0; }
    to { opacity: 1; }
}

@keyframes hideBlock {
   from { opacity: 1; }
   to { opacity: 0; display: none; }
}

---

不能转换（或设置动画）显示属性。

display

属性处于打开或关闭状态，没有任何要转换或设置动画的内容

您可以做的是设置不透明度的动画，并在开始和结束时更改显示属性

比如：

@keyframes showBlock {
    from { display: block; opacity: 0; }
    to { opacity: 1; }
}

@keyframes hideBlock {
   from { opacity: 1; }
   to { opacity: 0; display: none; }
}

---

嗨，谢谢。我在我的当前代码中切换了不透明度以显示，它现在可以工作了，但我以前没有使用过关键帧，我如何用我的当前结构来调用该关键帧？在javascript或/和css div？Hi@nameless中，关于css动画的信息比我在这里提供的多得多：谢谢你，我很感激我，谢谢你。我在我的当前代码中切换了不透明度以显示，它现在可以工作了，但我以前没有使用过关键帧，我如何用我的当前结构来调用该关键帧？在javascript或/和css div？Hi@nameless中，关于css动画的信息比我在这里提供的多得多：谢谢，我很感激