CSS/JS：追加元素不動畫

Question

我試圖設計一個消息框，可以通過調用以下函數來顯示：

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和定位正確，但沒有動畫。所以最終的結果是我想要的，但動畫不會觸發淡入淡出效果 ...我做錯了什麼？

如果您不知道我的意思，請隨時向下面提問。

Answer 1

變化動畫延遲：5秒;至動畫持續時間：5s;，它會工作

Answer 2

我已經創建了一個用於演示目的的plunkr。

你失蹤的重要財產 「動畫時長」

https://plnkr.co/edit/1sytQlOk90Du3ibGE6T5?p=preview

.msgFG{ 
    position:absolute; 
    top: calc(50% - 200px); 
    left: calc(50% - 300px); 
    margin:0 auto; 
    border-radius:20px; 
    animation: msgFGAppear 12s normal ; 
} 

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