弧を描いて移動するCSSアニメーションサンプル

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

弧を描きながら移動するCSSアニメーションを作成する方法を紹介しています。

transformのtranslateだけでXY移動させようとすると斜めの直線移動になってしまいます。
検索からこのページにアクセスした方はおそらくそこで困っているのではないでしょうか。

弧を描いて移動するCSSアニメーション

CSSのみで弧を描いて移動するアニメーションの動作サンプルとサンプルコードです。

動作サンプルでは半円に沿って弧を描くCSSアニメーションを各方向別に4種類設置しました。

各方向セットなのとアニメーションの終了後に逆再生を付けていますので、正直ちょっと弧を描いている感が伝わりにくいサンプルになったと反省、ひとつひとつを見ると弧を描いて移動している事がわかります。

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

HTMLには、移動させたい4方向分の要素をdivで作成しいています。

<div class="container">
	<div class="item i1">1</div>
	<div class="item i2">2</div>
	<div class="item i3">3</div>
	<div class="item i4">4</div>
</div>

4方向分ありますので、CSSコードは少し長くなっていますが、ひとつひとつはシンプルです。
下記にて、個別にひとつだけ取り出して簡単なコード紹介をしています。

画像やテキストも同じように利用可能です。

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

.item {
	position: absolute;
	top: 100px;
	left: 100px;
	width: 50px;
	height: 50px;
	background: #0091EA;
	transform: translateX(-100px);
	/* for text */
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 30px;
	color: #FFF;
}

.i1 {
	background: #4169e1;
	animation: arc-move-anim-1 4s linear infinite alternate;
}

.i2 {
	background: #ff6347;
	animation: arc-move-anim-2 4s linear infinite alternate;
}

.i3 {
	background: #32cd32;
	animation: arc-move-anim-3 4s linear infinite alternate;
}

.i4 {
	background: #ff69b4;
	animation: arc-move-anim-4 4s linear infinite alternate;
}

@keyframes arc-move-anim-1 {
	0% {
		transform: rotate(0deg) translateX(-100px) rotate(0deg);
	}

	100% {
		transform: rotate(180deg) translateX(-100px) rotate(-180deg);
	}
}

@keyframes arc-move-anim-2 {
	0% {
		transform: rotate(0deg) translateX(100px) rotate(0deg);
	}

	100% {
		transform: rotate(180deg) translateX(100px) rotate(-180deg);
	}
}

@keyframes arc-move-anim-3 {
	0% {
		transform: rotate(0deg) translateY(-100px) rotate(0deg);
	}

	100% {
		transform: rotate(180deg) translateY(-100px) rotate(-180deg);
	}
}

@keyframes arc-move-anim-4 {
	0% {
		transform: rotate(0deg) translateY(100px) rotate(0deg);
	}

	100% {
		transform: rotate(180deg) translateY(100px) rotate(-180deg);
	}
}

ひとつのアニメーションキーフレームだけ取り出すと以下のようになっています。

1つ目のrotate()とtranslateX()で回転移動させながら、2つ目のrotate()で要素が傾かないように保っている、と捉えるとわかりやすいかもしれません。

直感的に高度や終点を指定するのは難しいですが、translateX()で移動範囲を拡縮する事は可能です。

@keyframes arc-move-anim-1 {
	0% {
		transform: rotate(0deg) translateX(-100px) rotate(0deg);
	}

	100% {
		transform: rotate(180deg) translateX(-100px) rotate(-180deg);
	}
}