Lösen Sie schnell das Problem der weißen Lücke (Flash-Bildschirm), wenn CSS @keyframes verwendet, um Bilder für den ersten Zyklus zu laden

//html
 <div Klasse="Container">
        <div Klasse="Erste"> </div>
  </div>
//weniger
.container {
  Breite: 100vw;
  Höhe: 100%;
}
.container .erste {
  Breite: 100vw;
  Höhe: 100vh;
  Animation: bgmove 10s unendlich;
}
@keyframes bgmove {
  0% {
    Hintergrund: URL("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-1.jpg") keine Wiederholung, Mitte, Mitte;
    Hintergrundgröße: Abdeckung;
    Deckkraft: 1;
  }
  15 % {
    Hintergrund: URL("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-1_1.jpg") keine Wiederholung, Mitte, Mitte;
    Deckkraft: 1;
    Hintergrundgröße: Abdeckung;
  }
  30% {
    Hintergrund: URL("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-2_1.jpg") keine Wiederholung, Mitte, Mitte;
    Deckkraft: 1;
    Hintergrundgröße: Abdeckung;
  }
  45 % {
    Hintergrund: URL("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-4_1.jpg") keine Wiederholung, Mitte, Mitte;
    Deckkraft: 1;
    Hintergrundgröße: Abdeckung;
  }
  60 % {
    Hintergrund: URL("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-5_1.jpg") keine Wiederholung, Mitte, Mitte;
    Deckkraft: 1;
    Hintergrundgröße: Abdeckung;
  }
  80 % {
    Hintergrund: URL("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-1_1.jpg") keine Wiederholung, Mitte, Mitte;
    Deckkraft: 1;
    Hintergrundgröße: Abdeckung;
  }
  100 % {
    Hintergrund: URL("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-1.jpg") keine Wiederholung, Mitte, Mitte;
    Hintergrundgröße: Abdeckung;
    Deckkraft: 1;
  }
}

//weniger
.container {
  Breite: 100vw;
  Höhe: 100%;
}
.container .erste {
  Breite: 100vw;
  Höhe: 100vh;
  Hintergrund: URL ("https://sqimg.qq.com/qq\_product\_operations/im/pcqq/9.0/firstscreen\_img/BG-1.jpg"),
             url("https://sqimg.qq.com/qq\_product\_operations/im/pcqq/9.0/firstscreen\_img/BG-1\_1.jpg"),
             url("https://sqimg.qq.com/qq\_product\_operations/im/pcqq/9.0/firstscreen\_img/BG-2\_1.jpg"),
             url("https://sqimg.qq.com/qq\_product\_operations/im/pcqq/9.0/firstscreen\_img/BG-4\_1.jpg"),
             url("https://sqimg.qq.com/qq\_product\_operations/im/pcqq/9.0/firstscreen\_img/BG-5\_1.jpg"),
             url("https://sqimg.qq.com/qq\_product\_operations/im/pcqq/9.0/firstscreen\_img/BG-1\_1.jpg");
  Animation: bgmove 10s unendlich;
}
@keyframes bgmove {
  0% {
    Hintergrund: URL("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-1.jpg") keine Wiederholung, Mitte, Mitte;
    Hintergrundgröße: Abdeckung;
    Deckkraft: 1;
  }
  15 % {
    Hintergrund: URL("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-1_1.jpg") keine Wiederholung, Mitte, Mitte;
    Deckkraft: 1;
    Hintergrundgröße: Abdeckung;
  }
  30% {
    Hintergrund: URL("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-2_1.jpg") keine Wiederholung, Mitte, Mitte;
    Deckkraft: 1;
    Hintergrundgröße: Abdeckung;
  }
  45 % {
    Hintergrund: URL("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-4_1.jpg") keine Wiederholung, Mitte, Mitte;
    Deckkraft: 1;
    Hintergrundgröße: Abdeckung;
  }
  60 % {
    Hintergrund: URL("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-5_1.jpg") keine Wiederholung, Mitte, Mitte;
    Deckkraft: 1;
    Hintergrundgröße: Abdeckung;
  }
  80 % {
    Hintergrund: URL("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-1_1.jpg") keine Wiederholung, Mitte, Mitte;
    Deckkraft: 1;
    Hintergrundgröße: Abdeckung;
  }
  100 % {
    Hintergrund: URL("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-1.jpg") keine Wiederholung, Mitte, Mitte;
    Hintergrundgröße: Abdeckung;
    Deckkraft: 1;
  }
}