CSSで作成したフルスクリーンのスライドショーに白いフリッカーがはいってしまう…。

###ウェブサイトでフルスクリーンのクロスフェードを使ったスライドショーを作成したい。
CSSアニメーションを使って画像と画像がクロスフェードするフルスクリーンのスライドショーを作ってみたのですが、
画像のトランジションの際に一瞬白いフリッカーが入ってしまいました。
現在試行錯誤しておりますが、なかなかうまく行きません。
CSSじゃなくてもJavaScriptを使っても良いので、どなたかクロスフェードのスライドショーの作り方を教えていただける方はいませんでしょうか？

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="utf-8">
5  <link rel="stylesheet" href="css/style.css">
6  <title>Slideshow</title>
7</head>
8<body>
9  <div class="slideshow">
10    <div class="content">
11      <h1>Creativity. Passion. Motivation.</h1>
12      <h3>Make even the ordinary possible.</h3>
13    </div>
14  </div>
15</body>
16</html>
17

css
1body {
2  margin: 0;
3  padding: 0;
4}
5
6.slideshow {
7  height: 100vh;
8  weight: 100%;
9  background-image: url('../images/1.jpg');
10  background-size: cover;
11  animation: slide 24s infinite;
12}
13
14@keyframes slide {
15  25% {
16    background-image: url('../images/2.jpg');
17    background-size: cover;
18  }
19
20  50% {
21    background-image: url('../images/3.jpg');
22    background-size: cover;
23  }
24
25  75% {
26    background-image: url('../images/4.jpg');
27    background-size: cover;
28  }
29}

m.ts10806

2019/04/18 12:34

「うまくいきません」では状況がなにも伝わりません。(見ている人はみんな赤の他人です) 実際にできていることいないこと、分かっていることいないこと、現在起きている問題など具体的に記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

たぶん画像のロード時間だと思います。
当方の環境では、link要素によるプリロードでも解決しなかったので、いっそのこと最初の状態で全部の画像を背景にしてしまうのはどうでしょう。

css
1.slideshow {
2  background-image: url('../images/1.jpg'),
3                    url('../images/2.jpg'),
4                    url('../images/3.jpg'),
5                    url('../images/4.jpg');