加载页面淡出后复现问题：仅用HTML/CSS如何修复？

问题根源 #

你的动画执行完后，加载层会变回初始的可见状态，这是因为CSS动画默认不会保留结束后的样式，执行完就回到初始值了。

修复方案（动画方式） #

给.frontpage添加animation-fill-mode: forwards，强制让元素停在动画最后一帧的状态：

.frontpage {
  background-color: black;
  height: 100vh;
  z-index: 1; 
  animation: fadeout 3s linear;
  /* 关键：让动画结束后保持最后一帧样式 */
  animation-fill-mode: forwards;
  /* 补充：固定定位确保加载层完全覆盖页面 */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

@keyframes fadeout {
    from { 
      opacity: 1; 
      visibility: visible; 
    }
    to { 
      opacity: 0; 
      visibility: hidden; 
      /* 可选：禁用点击事件，避免隐藏后仍阻挡页面交互 */
      pointer-events: none;
    }
}

为啥transition没效果？ #

transition需要状态变化触发（比如鼠标hover、类名切换），但纯HTML/CSS没有自动触发的机制，没法像动画那样页面加载就自动运行，所以用动画是更适合的方案。

完整HTML示例 #

<div class="frontpage">
  <h1 align="center"> Loading ...</h1>
  <div class="loader"> </div>
</div>
<!-- 这里放你的实际页面内容 -->
<div class="actual-page">
  <h1>实际页面内容</h1>
</div>

内容的提问来源于stack exchange，提问作者sage