CSS animationの実装について（ループ処理をなくしたい）

Question

前提・実現したいこと

CSS animation 初心者です。よろしくお願い致します。
以下、実装したい流れとコードになります

【実装したい流れ】
１）白背景に「logo.png」とその上にマークが配置された状態でアニメーション
２）背景に写真がでてきて「logo01.png」が「logo02.png」に切り替わる
３）「logo01.png」が「logo02.png」に切り替わったタイミングで「catchcopy.png」が表示される

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

・ロゴ変化部分が繰り返しアニメーション表示されてしまう。
logo01.png　→　logo02.png　に変化後はずっとlogo02.pngのまま停止させたい

該当のソースコード

/*html*/
	<div id="main">
		<img src="img/main-bg.png" class="main_bg">
		<div class="inner">
			<div class="catch">
				<img class="logo01" src="img/logo01.png">
				<img class="logo02" src="img/logo02.png">
			</div>
			<img class="catchcopy" src="img/catchcopy.png">
		</div>
	</div>


/*css*/
#main {
	height: 600px;
	overflow: hidden;
}
#main .inner {
	height: 600px;
}
#main img.main_bg{
	animation: fadein 8s;
	width: 100%;
	position: absolute;
	z-index: 0;
}
@keyframes fadein {
	0% { opacity: 0; }
	50%{ opacity: 0; }
    100% { opacity: 1; }
}

#main .catch {
	display: block;
	width: 100%;
	position: relative;
}
#main .catch img {
	position: absolute;
	width: 300px;
	margin-left: -150px;
	left: 50%;
	top: 100px;
}
#main .catch .logo02 {
	animation: fadein 5s;
}
@keyframes fadein {
	0%{ opacity: 0; }
	100%{ opacity: 1; }
}


#main .catchcopy {
	animation: fadein 8s;
    position: absolute;
    width: 400px;
    margin-left: -200px;
    left: 50%;
    top: 460px;
}
@keyframes fadein {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

試したこと

jQueryなどでも同様の動きを実装できないか試してみましたが、希望する動きになりませんでした。

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

Answer 1

infinite を指定しているからでは。

infinite
アニメーションは無制限に繰り返されます。
animation-iteration-count - CSS: カスケーディングスタイルシート | MDN

Comments

[kmo625kmo]

ご回答ありがとうございます！
その後、こちらのように書き換えたのですが、反復処理は続いてしまいました。

#main {
height: 600px;
overflow: hidden;
}
#main .inner {
height: 600px;
}
#main img.main_bg{
animation: fadein 5s;
width: 100%;
position: absolute;
z-index: 0;
}
@keyframes fadein {
0% { opacity: 0; }
50%{ opacity: 0; }
100% { opacity: 1; }
}

#main .catch {
display: block;
width: 100%;
position: relative;
}
#main .catch img {
position: absolute;
width: 300px;
margin-left: -150px;
left: 50%;
top: 100px;
}
#main .catch .img02 {
animation: fadein 5s;
}
@keyframes fadein {
0%{ opacity: 0; }
100%{ opacity: 1; }
}

#main .catchcopy {
animation: fadein 10s;
position: absolute;
width: 400px;
margin-left: -200px;
left: 50%;
top: 460px;
}
@keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}

[Lhankor_Mhy]

ご提示のHTMLには、.img02 という要素がないようですね。
.logo02 の間違いではないかと思います。

[kmo625kmo]

ありがとうございます！
ご指摘のあった箇所を.logo02に統一したところ、直りました！

[Lhankor_Mhy]

ご解決されて何よりです。