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

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;
	}
}