css - 纯 CSS : hide gif as preloading animation

Question

我正在做一个业余元素，我需要为网站添加一个预加载动画，它应该在禁用 Javascript 时工作。

现在我有一个 html div 和一个 gif 的 img 链接，如下所示:

<div class="loading">
   <img src="https://media.giphy.com/media/jFIgJGFHHFxde/giphy.gif">
</div>

我如何使用 css 让这个 gif 消失，然后在几秒钟后显示网站其余部分的内容？

Answer 1

@keyframes anime{
  0%{
    opacity:1;
  }
  100%{
    opacity:0;
  }
}
@-webkit-keyframes anime{
  0%{
    opacity:1;
  }
  100%{
    opacity:0;
  }
}
@keyframes anime2{
  0%{
    opacity:0;
  }
  100%{
    opacity:1;
  }
}
@-webkit-keyframes anime2{
  0%{
    opacity:0;
  }
  100%{
    opacity:1;
  }
}
.loading{
  animation-name:anime;
  animation-duration:1s;
  animation-delay:1s;
  animation-fill-mode:forwards;
}
#info{
  opacity:0;
  animation-name:anime2;
  animation-duration:1s;
  animation-delay:5s;
  animation-fill-mode:forwards;
}

<div class="loading">
   <img src="https://media.giphy.com/media/jFIgJGFHHFxde/giphy.gif">
</div>
<div id="info">
The Quick Fox ate all of the fish
</div>