【スマホ版chrome】CSSのアニメーションがちらつく

前提・実現したいこと

LPページのトップにフェードイン・フェードアウトを行う背景を設定したい

発生している問題・エラーメッセージ

スマホ版chromeにて
表示する1周目のみちらつく

具体的には
・ページを更新した直後にピカッと画面が白くなり、再度読み込み始める
・次の画像への切り替わりはじめに直前の画像が一瞬表示される

該当のソースコード

html
1<div class="main_imgBox">
2    <h1> <img class="main_logo" src="logo"></h1>
3    <div class="main_img" style="background-image: url(img)"></div>
4    <div class="main_img" style="background-image: url(img)"></div>
5    <div class="main_img" style="background-image: url(img)"></div>
6    <div class="main_img" style="background-image: url(img)"></div>
7    <div class="main_img" style="background-image: url(img)"></div>
8    <div class="main_img" style="background-image: url(img)"></div>
9</div>
10

css
1.main_logo {
2  z-index: 11;
3  position: absolute;
4  top: 50%;
5  left: 50%;
6  transform: translate(-50%, -50%);
7  width: 50vw;
8  height: auto;
9
10}
11.main_logo {
12  z-index: 11;
13  position: absolute;
14  top: 50%;
15  left: 50%;
16  transform: translate(-50%, -50%);
17  width: 50vw;
18  height: auto;
19
20}
21.main_img {
22
23  z-index: 10;
24  opacity: 0;
25  width: 100%;
26  height: 100vh;
27  background-position: center center;
28  background-repeat: no-repeat;
29  background-size: cover;
30  position: absolute;
31  left: 0;
32  top: 0;
33  -webkit-animation: anime 20s 0s infinite;
34  animation: anime 20s 0s infinite;
35	display:  inline-block;
36	-webkit-backface-visibility:hidden;
37backface-visibility:hidden;
38
39}
40.main_img:nth-of-type(2) {
41  -webkit-animation-delay: 4s;
42  animation-delay: 4s;
43}
44.main_img:nth-of-type(3) {
45  -webkit-animation-delay: 8s;
46  animation-delay: 8s;
47}
48.main_img:nth-of-type(4) {
49  -webkit-animation-delay: 12s;
50  animation-delay: 12s;
51}
52.main_img:nth-of-type(5) {
53  -webkit-animation-delay: 16s;
54  animation-delay: 16s;
55}
56.main_img:nth-of-type(6) {
57  -webkit-animation-delay: 20s;
58  animation-delay: 20s;
59}
60@keyframes anime {
61  0% {
62    opacity: 0;
63  }
64  8% {
65    opacity: 1;
66  }
67  17% {
68    opacity: 1;
69  }
70  25% {
71    opacity: 0;
72    transform: scale(1.05);
73    z-index: 9;
74  }
75  100% {
76    opacity: 0
77  }
78}
79@-webkit-keyframes anime {
80  0% {
81    opacity: 0;
82  }
83  8% {
84    opacity: 1;
85  }
86  17% {
87    opacity: 1;
88  }
89  25% {
90    opacity: 0;
91    -webkit-transform: scale(1.05);
92    z-index: 9;
93  }
94  100% {
95    opacity: 0
96  }
97}