javascript - CSS/JS:附加元素不设置动画

我正在尝试设计一个消息框，可以通过调用以下函数来显示该消息框：

function showMsg(msg, state){ //state: -1: red, 0: orange (normal), 1: green
    var bg = document.createElement("div");
    bg.className = "msgBG";
    //RELEVANT ->

    var fg = document.createElement("div");
    fg.className = "msgFG";

    //<- RELEVANT
    var text = document.createElement("span");
    text.className = "msgText";
    text.innerText = msg;
    var button = document.createElement("button");
    button.className = "mediumButton msgButton";
    button.innerText = "OK";
    fg.appendChild(text);
    fg.appendChild(button);
    bg.appendChild(fg);
    document.body.appendChild(bg);
}

这个想法是fg在创建时从页面底部淡入，因此我使用以下CSS来做到这一点：

.msgFG{
    position:absolute;
    top: calc(50% - 200px);
    left: calc(50% - 300px);
    width:600px;
    height:400px;
    margin:0 auto;
    background-color:var(--bg-color);
    border: solid 5px var(--fg-color);
    border-radius:20px;
    animation-name: msgFGAppear;
    animation-delay: 5s;
}

@keyframes msgFGAppear{
    from{
        top:100%;
    }
    to{
        top: calc(50% - 200px);
    }
}

fg正在正确创建和定位，但没有动画。因此，最终结果是我想要的结果，但是动画不会为淡出该结果而触发……我做错了什么？

如果您不明白我的意思，请在下面提问。

最佳答案

更改动画延迟：5秒；动画时间：5s；它会工作