最終更新日
記事公開日

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

お客さん

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

隊員1号

了解です!2つ紹介いたします。

まずは、一つ目。

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

「ぼかしフィルター」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>
隊員1号

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

「フェードエエフェクト」を使ったCSSオープニングアニメーション

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>
この記事のURLをコピー

メールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

関連情報

運営者プロフィール
運営者のプロフィール画像
隊員1号

IT系フリーランスとして10年の経験を持つレスキュー隊。HTML・CSS・JS・PHPなど幅広いスキルを持つ。

詳しいプロフィール