如何在加載所有圖像之前延遲 CSS 動畫？

Question

我有一個簡單的 CSS 滑塊，可以循環顯示 4 個背景圖像，但是它僅在第一個循環中在圖像之間閃爍； 這是最重要的。 我認為大多數人不會兩次觀看滑塊。 這是一個鏈接，您可以查看問題https://awesome-darwin-135a87.netlify.app ，這里是 CSS。

.hero {
  background-color: var(--black);
  background-image: url('./images/1.jpg');
  height: 100vh;
  background-position: center;
  background-size: cover;
  padding: 0.5rem calc((100vw - 1200px) / 2);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  animation: slide 20s infinite;
}

@keyframes slide {
  25%{
    background-image: url('./images/2.jpg');
  }
  50%{
    background-image: url('./images/3.jpg');
  }
  75%{
    background-image: url('./images/4.jpg');
  }
  100%{
    background-image: url('./images/1.jpg');
  }
}

理想情況下，我想要一種方法將 HTML 推遲到圖像加載完畢，但可能有一個更簡單的解決方案來解決我的問題。 我試圖壓縮圖像文件，它減少了閃存的時間，但沒有解決問題。 我想到的另一個解決方案是從黑色背景中淡入每個圖像，這樣它就不會閃爍並且看起來更自然，但我不確定如何為這組圖像實現兩個動畫。 任何幫助，將不勝感激。

Answer 1

嘗試使用圖像預加載，如示例所示，也使用漸進式圖像。

  <head>
...
    <link rel="preload" href="./images/1.jpg" as="image" />
    <link rel="preload" href="./images/2.jpg" as="image" />
    <link rel="preload" href="./images/3.jpg" as="image" />
    <link rel="preload" href="./images/4.jpg" as="image" />
  </head>

如何在加載所有圖像之前延遲 CSS 動畫？

問題描述

1 個解決方案

解決方案1
1 2021-10-19 04:49:36

如何在加載所有圖像之前延遲 CSS 動畫？

問題描述

1 個解決方案

解決方案1 1 2021-10-19 04:49:36

解決方案1
1 2021-10-19 04:49:36