如何不使用JS实现预加载器（preloader）自动消失

要实现无JS的预加载器，核心是让CSS动画的时长和你的GIF播放时长匹配，动画结束后自动隐藏预加载器。以下是修改后的可行方案：

最终代码 #

HTML #

<div class="preloader">
  <div class="preloader__image"></div>
</div>

CSS #

.preloader {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  background: #fff;
  z-index: 1001;
  /* 总动画时长 = GIF播放时长(1.2s) + 淡出过渡时长(0.3s)，只播放一次 */
  animation: hidePreloader 1.5s ease-in-out forwards;
}

.preloader__image {
  position: relative;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  margin-top: -32px;
  margin-left: -32px;
  background: url(https://i.ibb.co/37T8DPh/Preloader-1.gif) no-repeat 50% 50%;
}

/* 自定义隐藏动画：前80%时间保持显示（对应GIF播放完成），最后20%时间淡出隐藏 */
@keyframes hidePreloader {
  0%, 80% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* 避免隐藏后阻挡页面交互 */
  }
}

关键说明 #

1. 匹配GIF时长：先确定你的GIF精确播放时长（可通过浏览器开发者工具查看该GIF文件的时长）。比如示例中GIF为1.2秒，总动画时长设为1.5秒（加0.3秒淡出），80%的时间点就是GIF播放完成的节点。若你的GIF时长不同，对应调整百分比和总动画时长即可。
2. animation-fill-mode: forwards：这个属性会让动画结束后，元素保持最后一帧的样式，也就是彻底隐藏的状态。
3. visibility + opacity：只设置opacity为0的话，元素仍会占据页面空间并阻挡交互，配合visibility: hidden和pointer-events: none可以让预加载器完全退出页面。

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