Javascript 加载Gif，然后循环Gif

我想在站点加载时显示gif，然后将其更改为循环gif。我试着找他，但运气不好。任何关于如何实现这一目标的指导都将不胜感激

下面是我创建的两个动画图标。它们的类区分哪一个正在加载，哪一个正在循环

。加载gif时，.循环gif{
最大宽度：335px；
位置：绝对位置；
排名：0；
左：0；
}
.加载gif{
不透明度：1；
动画：fadeInAnimation ease 3s
动画迭代次数：1；
动画填充模式：正向；
动画持续时间：2秒；
} 
@关键帧fadeInAnimation{
0% { 
不透明度：1；
} 
100% { 
不透明度：0；
} 
}

动画循环

第一个gif显示在页面上，然后在页面完全加载后隐藏该gif，然后显示另一个gif（r-animation.gif）？除了问题之外，我们还在页面上等待什么？我假设使用javascript是适用的？@jmp好吧，加载的gif显示时间不够长，无法播放其上的动画。即使我将第一个gif的持续时间设置为50秒，它似乎也不会停留在页面上，而是立即消失。