页面淡出后重新出现

Question

我正在尝试使“假”加载屏幕淡出到实际页面中。我的淡出动画是正确的，但是动画完成后，加载页面再次出现。我该如何解决？我尝试更改动画过渡，但它甚至没有淡出。

PS：这是一项作业，我只能使用 HTML 和 CSS

.frontpage {
  background-color: black;
  height: 100vh;
  z-index: 1; 
  animation: fadeout 3s linear;
 }

@keyframes fadeout {
    from { opacity: 1; visibility: visible; }
    to { opacity: 0; visibility: hidden; }
}

HTML:

<div class="frontpage">
<h1 align="center"> Loading ...</h1>
<div class="loader"> </div>
</div>

Answer 1

您应该为动画设置“前进”以保持稳定。

.frontpage {
  background-color: black;
  height: 100vh;
  z-index: 1; 
  animation: fadeout 3s linear forwards;
 }