CSS幻灯片背景加载缓慢

但是，我已经使用CSS为背景制作了一个简单的幻灯片，因为我使用的是关键帧，所以我不知道如何使所有背景都使用background-size：cover。我希望所有图片都适合屏幕。

此外，当您首次打开网站时，图片需要2秒钟才能加载。 （它只显示为白色，然后您会看到图片已加载）

最后，我还想使网站具有响应性，例如，使背景图片根据屏幕尺寸而改变大小。

如果我使用普通

body {

   background-image: url("picture.jpg");

}

然后，我将使用@media，但是在这种情况下，我不知道什么可行。

另外，正如您所看到的，我已经完成了很多%%的操作，我试图使图片在屏幕上停留的时间更长，同时使旋转动画更快。

这是我的CSS（我知道这是制作背景幻灯片的一种愚蠢的方法，但这是最简单的:)）

body {
  background-size: cover;
  animation: div 25s infinite;
  height: 100vh;
  margin: 0;
}


@keyframes div {
  0% {
    background-image: url("4.jpg");
    opacity: 1;
  }

  15% {
    background-image: url("4.jpg");
    opacity: 1;
  }

  25% {
    background-image: url("3.jpg");
    opacity: 1;
  }

  35% {
    background-image: url("3.jpg");
    opacity: 1;
  }

  45% {
    background-image: url("1.jpg");
    opacity: 1;
  }

  55% {
    background-image: url("1.jpg");
    opacity: 1;
  }

  65% {
    background-image: url("5.jpg");
    opacity: 1;
  }

  75% {
    background-image: url("5.jpg");
    opacity: 1;
  }

  85% {
    background-image: url("4.jpg");
    opacity: 1;
  }

  100% {
    background-image: url("4.jpg");
    opacity: 1;
  }
}

这是网站：

https://student.oedu.se/~sc0007/sak/sida_1/sida_1.html