スライドしながらフェードイン、フェードアウトするCSSアニメーションサンプル

CSS アニメーション サンプル集,CSS

スライドしながらフェードイン、フェードアウトするCSSアニメーションサンプル

CSSのanimationプロパティを使って、テキストや画像などの要素を横にスライドしながらフェードイン（スライドイン）、横にスライドしながらフェードアウト（スライドアウト）させるCSSアニメーションのサンプルコードです。

テキストをスライドしながらフェードイン

テキストを横スライドしながらフェードインさせているサンプルコードです。

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

サンプルで使っているHTMLです。

<div class="container">
	<p class="text">SLIDE IN</p>
</div>

テキストの終点は、親要素の中央になりますがテキスト要素を中央に揃えて尚且つアニメーションで動かす場合、「margin-left: 50%」でテキスト要素を半分左にずらした状態で記述するのが簡単な方法です。

フェードインなので透過した状態で、画面から見切れる場所を初期位置に指定しています。

.container{
	width: 100%;
}

.text{
	font-family: 'arial black';
	font-size: 60px;
	text-align: center;
	margin-left: 50%;
	transform: translateX(-200%);
	opacity: 0;
	animation: slide-in-anim 1.5s ease-out forwards;
}

@keyframes slide-in-anim {
	20% {
		opacity: 0;
	}
	60% {
		transform: translateX(-45%);
	}
	75% {
		transform: translateX(-52%);
	}
	100% {
		opacity: 1;
		transform: translateX(-50%);
	}
}

テキストをスライドしながらフェードアウト

テキストを横スライドしながらフェードアウトさせているサンプルコードです。

See the Pen CSS | Text Slide out animation by yochans (@yochans) on CodePen.

<div class="container">
	<p class="text">SLIDE IN</p>
</div>

フェードアウトの場合、フェードインのコードに、animationプロパティで「reverse（逆再生）」を指定するだけで、らしくなるのですが、今回は別途フェードアウト用の@keyframesを作ってみました。

.container{
	width: 100%;
}
.text{
	font-family: 'arial black';
	font-size: 60px;
	text-align: center;
	margin-left: 50%;
	transform: translateX(-50%);
	animation: slide-out-anim 1.5s ease-out forwards;
}

@keyframes slide-out-anim {
	20% {
		opacity: 1;
		transform: translateX(-55%);
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 0;
		transform: translateX(200%);
	}
}

画像をスライドしながらフェードイン

画像を横スライドしながらフェードインさせているサンプルコードです。

See the Pen CSS | Image Slide 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>

画像の場合も同様に、初期位置を親要素のサイズから見切れる位置にしています。

透過状態なので、親要素からはみ出る事はないかと思いますが、「overflow: hidden」を親要素に指定しておいた方が良いかも知れません。

.container{
	width: 100%;
}

.image{
	width: 100%;
	opacity: 0;
	margin-left: 50%;
	transform: translateX(-200%);
	opacity: 0;
	animation: slide-in-anim 1.5s ease-out forwards;
}

@keyframes slide-in-anim {
	20% {
		opacity: 0;
	}
	60% {
		transform: translateX(-45%);
	}
	75% {
		transform: translateX(-52%);
	}
	100% {
		opacity: 1;
		transform: translateX(-50%);
	}
}

画像をスライドしながらフェードアウト

画像を横スライドしながらフェードアウトさせているサンプルコードです。

See the Pen CSS | Image Slide 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>

サンプルでは画像サイズを横幅100％になっていますが、どのサイズ指定でも横から中央にフェードインしているようになると思います。

.container{
	width: 100%;
}

.image{
	width: 100%;
	opacity: 0;
	margin-left: 50%;
	transform: translateX(-50%);
	animation: slide-out-anim 1.5s ease-out forwards;
}

@keyframes slide-out-anim {
	20% {
		opacity: 1;
		transform: translateX(-55%);
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 0;
		transform: translateX(200%);
	}
}

opacity（透過度）やtransform（位置）を好みの数値に変えていけば、納得のいくCSSアニメーションになるかもしれません。

CSS アニメーション サンプル集,CSS

Posted by Yousuke.U