CSSだけでカンタン実装！シンプルなオープニングアニメーション

CSSだけで簡単に実装できるシンプルなオープニングアニメーションありませんか？

了解です！２つ紹介いたします。

まずは、一つ目。

「ぼかしフィルター」を使ったオープニングアニメーションです↓

SAMPLE

body div#container {
	width:100%;
	height:100vh;
	background:url('image/suika.jpg') center / cover no-repeat;
	animation-name:motion;
	animation-duration:4s;
	animation-timing-function:ease;
	transition-property: filter; 
}

@keyframes motion {
	0% {
		filter: blur(100px);
	}
	100% {
		filter: blur(0);
	}
}
#logo {
	display:flex;
	width:100%;
	height:100%;
}
#logo span {
	margin:auto;
	font-weight:bold;
	font-size:4em;
	color:#0060C0;
}

<div id="container">

	<div id="logo">
		<span>SUIKA</span>
	</div>

</div>

２つ目は「フェードエフェクト」を使ったオープニングアニメーションです↓

SAMPLE

.fade {
	position:fixed;
	top:0;
	left:0;
	margin:0 auto;
	width:100%;
	height:100vh;
	animation-name:motion;
	animation-duration:6s;
	animation-timing-function:ease;
	z-index:-10;
}

@keyframes motion {
	0% {
		z-index:10;
		background:#0060C0;
	}
	100% {
		background:none;
	}
}

#container {
	width:100%;
	height:100vh;
	background:url('image/suika.jpg') center / cover no-repeat;
}

#logo {
	display:flex;
	width:100%;
	height:100%;
}
#logo span {
	margin:auto;
	font-weight:bold;
	font-size:4em;
	color:#0060C0;
}

<div class="fade"></div>

<div id="container">

	<div id="logo">
		<span>SUIKA</span>
	</div>
</div>