要素の移動時に残像が残るCSSアニメーションサンプル

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

要素を移動させた時に残像が残る感じにしたCSSアニメーションのサンプルコードになります。

要素がテキストや画像だとそのままでは使えませんし、このページに検索からアクセスされた方は、おそらくはこれ以外の方法を探している方だと思われーー

残像はGoogle翻訳で「Afterimage」ですが、そのあたりで検索しても良い情報は見つからず。

もっと良い英単語があるのか、いや、そもそも「残像」という言葉の類義語があって、実は皆その言葉を私の知らないところでヒソヒソ楽しんでいるのかい？

@keyframesをめちゃくちゃ細かく設定すれば、ひとつのHTML要素でも一瞬戻したりして残像を演出できそうでしたけど、もうJavaScript使いますよねってレベルで、、、今回はこれで^^

要素の移動時に残像が残るCSSアニメーション

See the Pen CSS | Move along a circle animation by yochans (@yochans) on CodePen.

HTMLには、コンテナとする「.container」を作成、本体となる「.item」、残像部分になる「.zanzo」とその子要素としてdivタグを4つ設置しています。

<div class="container">
	<div class="item"></div>
	<div class="zanzo">
		<div></div><div></div><div></div><div></div>
	</div>
</div>

この残像アニメーションの内容は単純に本体の「.item」と残像となる「.zanzo div」を同じデザインで作成して同じアニメーションを指定しており、「.zanzo div」には別途 animation-delay にてアニメーションの開始タイミングを順に遅延させているだけのものになります。

HTML上で本体より残像を上に記述するのであれば、z-index は不要です。

アニメーションは残像感を感じる為にコーナー毎に一度動きが止まるように作ってあります。

.container {
	position: relative;
	width: 100%;
	height: 250px;
}

.item, .zanzo div {
	position: absolute;
	width: 50px;
	height: 50px;
	background: #4169e1;
	animation: circle-move-anim 5s linear infinite;
}

/* 残像部分 */
.zanzo div:nth-child(1) {
	animation-delay: 0.1s;
	opacity: 0.8;
	z-index: -1;
}

.zanzo div:nth-child(2) {
	animation-delay: 0.2s;
	opacity: 0.6;
	z-index: -2;
}

.zanzo div:nth-child(3) {
	animation-delay: 0.3s;
	opacity: 0.4;
	z-index: -3;
}

.zanzo div:nth-child(4) {
	animation-delay: 0.4s;
	opacity: 0.2;
	z-index: -4;
}

@keyframes circle-move-anim {

	0% {
		transform: translate(0);
	}

	15% {
		transform: translate(200px, 0);
	}

	25% {
		transform: translate(200px, 0);
	}

	40% {
		transform: translate(200px, 150px);
	}

	50% {
		transform: translate(200px, 150px);
	}

	65% {
		transform: translate(0, 150px);
	}

	75% {
		transform: translate(0, 150px);
	}

	90% {
		transform: translate(0);
	}

	100% {
		transform: translate(0);
	}
}