背景のアニメーションの後に画面がスクショを取ったときのように一瞬白くなる

前提・実現したいこと

灰色の背景色が消えたあと、背景画像が見えるようにしているんですが、画面が読み込まれてから6秒ほどでスクリーンショットしたときのように画面が一瞬白くなります。何が影響しているんでしょうか？

該当のソースコード

HTML
1    <header>
2      <div class="header-backgroundimage">
3      <div class="header-container">
4      <div class="header-logo">The Royal Luxury Hotel</div>
5      <p class="header-text">～人生最高の日をあなたに～</p>
6    </div><!-- /header-container -->
7  </div><!-- /header-backgroundimage -->
8    </header>

CSS
1@keyframes headerImageAnimation {
2  0% {
3    opacity: 0;
4  }
5  100% {
6    opacity: 1;
7  }
8}
9
10.header-backgroundimage {
11  background: url(../images/pickup3.jpg);
12  background-size: cover;
13  animation: headerImageAnimation 3s 6s forwards;
14}
15
16@keyframes headerCorolAnimation {
17  0% {
18    background: rgb(25, 25, 25);
19  }
20  100% {
21    background: none;
22  }
23}
24
25.header-container {
26  height: 100vh;
27  color: white;
28  text-shadow: 3px 3px 4px black;
29  display: flex;
30  align-items: center;
31  justify-content: center;
32  flex-flow: column;
33  font-size: 50px;
34  background:rgb(25, 25, 25);
35  animation: headerCorolAnimation 3s 3s forwards;
36  font-weight: bold;
37}
38
39.header-logo span {
40  display: inline-block;
41}
42
43.header-logo > span {
44  overflow: hidden;
45}
46
47@keyframes headerLogoAnimaiton {
48  0% {
49    transform: translateY(100%);
50    opacity: 0;
51  }
52}
53
54.header-logo > span > span {
55  animation: headerLogoAnimaiton 2s backwards;
56}
57
58/* header-text */
59@keyframes headerAnimation {
60  0% {
61    letter-spacing: .6em;
62    opacity: 0;
63  }
64}
65
66.header-text {
67  font-size: 1.5rem;
68  animation: headerAnimation 2s 3s backwards;
69}

JavaScript
1const textAnimation = document.querySelectorAll('.header-logo');
2
3for(let i = 0; i < textAnimation.length; i++) {
4  const textDivition = textAnimation[i],
5        texts = textDivition.textContent,
6        textArray = [];
7
8        textDivition.textContent = "";
9    
10    for(let k = 0; k < texts.split("").length; k++) {
11      if(texts.split("")[k] === " ") {
12        textArray.push(" ") 
13      } else {
14      textArray.push('<span><span style="animation-delay: ' + (k *.1) + 's;">' + texts.split("")[k] + '</span></span>')
15      }
16    }
17
18    for(let l = 0; l < textArray.length; l++) {
19      textDivition.innerHTML += textArray[l]
20    }
21}

試したこと

同様の現象を調べてみたところ、Firefoxでサイトを読み込んだときに白くなるという記載がありましたが、環境はGoogle chromeで、現象もサイトを読み込んでから時間が経っているので関係ないと判断しました。

補足情報（FW/ツールのバージョンなど）

dynabook V72/JLE
型番:PV82JLECNRDQE

amagiri

2022/05/23 14:39 編集

@keyframes headerImageAnimation { 0% { opacity: 0; } 100% { opacity: 1; } } .header-backgroundimage　{ animation: headerImageAnimation 3s 6s forwards; } この部分を削除したら問題が解決しました。元々このanimationプロパティは指定通りに効いていなかったので削除したんですが、同時に一瞬白くなる問題も内包していたようでした。偶然解決してしまったのでなぜ上記のCSSが白くなってしまう問題に影響していたのかが分かっていません。問題の箇所は判明したので、その箇所がどういう処理を行って白くなってしまったのか教えていただけたら幸いです。