モノクロの背景画像に色がつく様なアニメーションを実現したい

ファーストビュー、モノクロの背景画像に時間経過で色がつく様なアニメーションを実現したいです。
近いものは出来たのですが、下記の2点がクリア出来ずお力を借りたいです。

・最初の一枚にも遅延効果がかかってしまっているが、最初の一枚目はページを開いた段階で表示していたい
・2枚目のアニメーションが終わったタイミングで画像が消えてしまうので2枚目の画像を維持した状態で止めたい

html
1<body>    
2
3    <section id="mainvisual">        
4        <h1>
5            <div class="logo">ロゴ</div>
6        </h1>
7        <ul class="main_bg">
8            <li></li>
9            <li></li>
10        </ul>
11    </section>
12
13</body>

css
1#mainvisual {
2    width: 100%;
3    height: 100vh;
4    position: relative;
5}
6
7#mainvisual .logo {
8	width: clamp(240px, 60%, 500px);
9 color: #fff;
10	position: absolute;
11	top: 50%;
12	left: 50%;
13	transform: translateY(-50%) translateX(-50%);
14	-webkit- transform: translateY(-50%) translateX(-50%);
15}
16
17.main_bg {
18    position: fixed;
19    top: 0px;
20    left: 0px;
21    width: 100%;
22    height: 100%;
23    background: #000000;
24    z-index: -1;
25}
26.main_bg li {
27    position: absolute;
28    top: 0px;
29    left: 0px;
30    width: 100%;
31    height: 100%;
32    background-size: cover;
33    background-position: 50% 50%;
34    background-repeat: none;
35    opacity: 0;
36    -webkit-animation: anime 10s linear 0s ;
37    animation: anime 10s linear 0s ;
38	
39}
40.main_bg li:nth-child(1) { 
41    background-image: url(../images/bg_mainvisual.jpg);
42	  background-size: cover;
43    background-position: center; 
44	  filter: blur(5px) grayscale(80%);
45}
46.main_bg li:nth-child(2) {
47    background-image: url(../images/bg_mainvisual.jpg);
48	  background-size: cover;
49    background-position: center; 
50    -webkit-animation-delay: 2s;
51    animation-delay: 2s;
52}
53
54
55
56@-webkit-keyframes anime { 
57    0% {
58        -webkit-animation-timing-function: ease-in;
59        opacity: 0;
60    }
61    10% {
62        -webkit-transform: scale(1.1);
63        opacity: 1;
64    }
65    40% {
66        -webkit-transform: scale(1.2);
67            -webkit-animation-timing-function: ease-out;
68        opacity: 1;
69    }
70    50% {
71        -webkit-transform: scale(1.3);
72        opacity: 0;
73    }
74    100% { opacity: 0 }
75}
76@keyframes anime { 
77    0% {
78        animation-timing-function: ease-in;
79        opacity: 0;
80    }
81    10% {
82        opacity: 1;
83    }
84    40% {
85            animation-timing-function: ease-out;
86        opacity: 1;
87    }
88    50% {
89        opacity: 0;
90    }
91    100% { opacity: 0 }
92}

回答1件

ベストアンサー

なんか複雑なアニメーション設定にしてますが、

モノクロの背景画像に時間経過で色がつく様なアニメーション

ということなら、シンプルに grayscale(100%) から grayscale(0%) にアニメーションさせればいいのでは。
そうすればHTMLもシンプルになります。

サイズもアニメーションさせたいようなのですが、具体的にどのようなものがご希望なのか不明なので一例を提示しておきますので、お好みで修正してください。
(ついでにロゴの中央寄せは、CCS Gridを使ったものに修正しました。)

html
1<section id="mainvisual">
2  <div class="main_bg"></div>
3  <h1>
4    <div class="logo">ロゴ</div>
5  </h1>
6</section>

css
1body {
2  margin: 0;
3}
4
5#mainvisual {
6  width: 100%;
7  height: 100vh;
8  display: grid;
9  place-items: center;
10  overflow: hidden
11}
12
13#mainvisual h1 {
14  color: #fff;
15  grid-column: 1; 
16  grid-row: 1; 
17}
18#mainvisual .main_bg {
19  grid-column: 1; 
20  grid-row: 1; 
21  width: 100%;
22  height: 100%;
23  background-image: url(../images/bg_mainvisual.jpg);
24  background-size: cover;
25  background-position: center; 
26  animation: anime 10s linear 0s forwards; 
27  z-index: -1;
28}
29@keyframes anime {
30  0% {
31    filter:blur(5px)  grayscale(100%);
32    transform: scale(1);
33  }
34  50% {
35    filter:blur(0px)  grayscale(0%);
36  }  
37  100% {
38    transform: scale(1.3);
39  }
40}