png画像を重ねてfadeinし、その後ろにjpg背景を固定したい

Question

前提・実現したいこと

3枚のpng画像を重ねてfadeinし、その後ろにjpg背景を固定したい。(4枚画像同一サイズ)
背景はfadeinなしで最初から表示されるようにしたい。
背景の固定はfixではなくスクロールには連動させたい。

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

CSSbackgroundで指定するとjpgもfedeinされてしまう。

該当のソースコード

				<div class="motion2">
					<img src="/static/1.png" alt="" width="800" height="" id="01"/>
					<img src="/static/2.png" alt="" width="800" height="" id="01"/>
					<img src=""/static/3.png" alt="" width="800" height="" id="01"/>
				</div>

.pi_image .motion2 {
	position: relative;
	max-width: 800px;
	background:url(/static/***1.jpg) no-repeat;
	background-position:0px 0px;
	display:block;
	text-align:center;
	width:800px;
	margin:0 auto;
	clear:both;
	height: 1419px;
	background-size: 100% 100%;
	}

.pi_image li.fadeInUp .motion2 img,
{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: auto;
	opacity: 0;
	animation :showMe 2s ease 1;
	animation-fill-mode: forwards;
	}

.pi_image li.fadeInUp .motion2 img:nth-child(2),
{
	animation-delay: 1s;
}
（同様にimg:nth-child(3)）

コード

@keyframes fadeInUp {
0% {
transform: translateY(30px);
opacity:0;
}
50% {
transform: translateY(15px);
opacity:0.5;
}
100% {
transform: translateY(0px);
opacity:1;
}
}
@keyframes blend {
0% {
left:0%;
opacity:0;
}
50% {
left:0%;
opacity:1;
}
100% {
left:0%;
opacity:0;
}
}

.fadeInUp {
animation-name: fadeInUp;
animation-duration: 1s;
animation-delay: 2s;
animation-timing-function: ease;
animation-fill-mode: both;
}
@keyframes showMe {
0%{opacity: 0;}
100%{opacity: 1;}
}

試したこと

・<div class="motion2">にjpgを付け足し時間差で調整する、うまくいきませんでした。
・background localにする、fedeinされてしまう。

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

ここにより詳細な情報を記載してください。

Comments

[Lhankor_Mhy]

keyframes をご提示ください。

[tm0128]

ありがとうございます、下記になります。

@keyframes fadeInUp {
0% {
transform: translateY(30px);
opacity:0;
}
50% {
transform: translateY(15px);
opacity:0.5;
}
100% {
transform: translateY(0px);
opacity:1;
}
}
@keyframes blend {
0% {
left:0%;
opacity:0;
}
50% {
left:0%;
opacity:1;
}
100% {
left:0%;
opacity:0;
}
}

.fadeInUp {
animation-name: fadeInUp;
animation-duration: 1s;
animation-delay: 2s;
animation-timing-function: ease;
animation-fill-mode: both;
}
@keyframes showMe {
0%{opacity: 0;}
100%{opacity: 1;}
}

[Lhankor_Mhy]

3-7. markdownを利用しましょう
https://teratail.com/help/question-tips#questionTips3-7

[tm0128]

ありがとうございます

Answer 1

cssの文法エラーを直して以下の変更をしてみてはどうでしょうか。

@keyframes fadeInUp {
0% {
transform: translateY(30px);
/* opacity:0; 消す */
}
50% {
transform: translateY(15px);
/* opacity:0.5; 消す */
}
100% {
transform: translateY(0px);
/* opacity:1; 消す */
}
}

Comments

[tm0128]

CSSも見直しましたが、背景のfedeinが改修できませんでした。

[Lhankor_Mhy]

そうでしたか。
当方では上手くいきましたので、ご提示いただいていない部分に原因があるのか、あるいは私がtm0128さんがお考えの問題を共有できていないのかもしれませんね。