徐々にフェードイン、フェードアウトさせるCSSアニメーションサンプル

2021-06-062021-12-09CSS アニメーション サンプル集,CSS

CSSのアニメーションを利用して画像やテキストなどの要素を徐々にフェードイン、フェードアウトさせるサンプルコードです。

フェードイン・フェードアウトだけでしたらtransitionプロパティでも実装可能ですが、この記事ではanimationプロパティと@keyframesを使って紹介しています。

徐々にフェードインさせるCSSアニメーション

徐々にフェードインさせるCSSアニメーションのサンプルコードです。

タイトルに徐々にとつけていますがアニメーション時間を眺めに設定しているだけで、基本的に通常のフェードイン、フェードアウトとコードは同じになります。

See the Pen CSS | gradually fade in animation by yochans (@yochans) on CodePen.

<div class="container">
	<img class="image" src="https://1-notes.com/wp-content/uploads/2021/02/cat2.jpg" />
</div>

要素（サンプルでは.image）のopacity（透過度）を初期値として0にしています。
これは@keyframesで0%やfromで0を指定してもOK。

animationプロパティには15秒（アニメーション時間）、linear（開始から完了まで一定のアニメーション速度）、forwards（アニメーションを完了した状態で止める）を指定しています。

.container{
	width: 500px;
	max-width: 100%;
}

.image{
	width: 100%;
	opacity: 0;
	animation: fadein-anim 15s linear forwards;
}

@keyframes fadein-anim {
	100% {
		opacity: 1;
	}
}

徐々にフェードアウトさせるCSSアニメーション

徐々にフェードアウトさせるCSSアニメーションのサンプルコードです。

See the Pen CSS | gradually fade out animation by yochans (@yochans) on CodePen.

<div class="container">
	<img class="image" src="https://1-notes.com/wp-content/uploads/2021/02/cat2.jpg" />
</div>

フェードアウトでは、アニメーション完了時に完全透過（opacity: 0）の状態でアニメーションを止めているため、opacity: 1はいずれにも指定していません。

フェードインアニメーションと同様に、animationプロパティには15秒（アニメーション時間）、linear（開始から完了まで一定のアニメーション速度）、forwards（アニメーションを完了した状態で止める）を指定しています。

.container{
	width: 500px;
	max-width: 100%;
}

.image{
	width: 100%;
	animation: fadeout-anim 15s linear forwards;
}

@keyframes fadeout-anim {
	100% {
		opacity: 0;
	}
}