JavaScriptの.setTimeout()でページ上部にtoastを表示

setTimeout(function(){ 
    element.style.display = "none"; 
  }, 1500);

<div id="topToast">
<div class="topToastFace"><img src="https://dubdesign.net/wp-content/uploads/2020/04/face2.svg" alt="face"></div>
<div class="topToastMessege"><p>ここにトーストのメッセージが表示されます。ここにトーストのメッセージが表示されます。ここにトーストのメッセージが表示されます。ここにトーストのメッセージが表示されます。</p></div>
</div>

// ページのロードが終わったらtoast表示
const toast = document.getElementById("topToast"); // toastのID指定
window.addEventListener('load', () => { //ロード完了後イベント開始
  toast.className = "show"; // toastを表示
  setTimeout(function(){ toast.className = toast.className.replace("show", ""); }, 4500); // toastを4.5秒後非表示
});

#topToast {
    position: fixed;
    z-index: 9999;
    display: flex;
    top: -140px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 100%;
    max-width: 600px;
    padding: 20px 25px;
    border-radius: 5px;
    background: rgb(189,185,255);
    background: linear-gradient(90deg, rgba(189,185,255,1) 0%, rgba(103,184,255,1) 100%);
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    filter: drop-shadow(0px 2px 8px #ddd);
    transition: 0.8s ease-in-out;
}
#topToast.show {
    top: 40px;
}
.topToastFace {
    border-radius: 9999px;
    background: #fff;
    box-sizing: border-box;
    overflow: hidden;
    width: 180px;
}
.topToastMessege p {
    color: #fff;
    font-size: 0.9rem;
    line-height: 1.7;
    margin: 0;
    font-weight: 600;
    letter-spacing: 0.04rem;
}