纯CSS：隐藏gif作为预加载动画

Question

我正在进行一个侧面项目，并且我需要为网站添加一个预加载动画，它应该在Javascript被禁用时工作。

现在我有一个html div和img链接到gif，像这样：

<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>