ふわふわ・ゆらゆらさせるCSSアニメーションサンプル

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

CSSで要素や画像、テキストをふわふわ・ゆらゆらさせるCSSアニメーションサンプルです。

See the Pen CSS | Text in a circle by yochans (@yochans) on CodePen.

ふわふわ・ゆらゆらさせるCSSアニメーション

HTML要素をふわふわ・ゆらゆらさせるCSSアニメーションサンプルです。

今回はひとつのdiv要素とpタグのテキストを使ってみました。

<div id="container">
	<div class="circle"></div>
	<p class="text">FUWAYURA</p>
</div>

#container {
	position: relative;
	height: 200px;
	margin: 20px;
}

.circle {
	position: absolute;
	left: 20px;
	top: 0;
	width: 100px;
	height: 100px;
	background: #4169e1;
	border-radius: 50%;
	animation: wobbling_x 0.8s ease-in-out infinite alternate,
		wobbling_y 1.1s ease-in-out infinite alternate;
}

.text {
	position: absolute;
	left: 160px;
	top: 30px;
	font-size: 20px;
	animation: wobbling_x 0.7s ease-in-out infinite alternate,
		wobbling_y 1.2s ease-in-out infinite alternate;
}

@keyframes wobbling_x {
	0% {
		margin-left: 8px;
	}

	100% {
		margin-left: 0px;
	}
}

@keyframes wobbling_y {
	0% {
		margin-top: 0px;
	}

	100% {
		margin-top: 8px;
	}
}

アニメーションの指定は横方向の揺らぎと、縦方向の揺らぎは同時指定だとつまんない動きになってしまいますので、別々の@keyframesで作成して指定しいます。

ひとつの要素に複数の@keyframesを指定するにはカンマ区切りで記述可能です。

丸とテキストで同じ@keyframesを指定していますが、アニメーション時間を少しずらす事で違った動きを出しています。

animation: wobbling_x 0.7s ease-in-out infinite alternate,
	wobbling_y 1.2s ease-in-out infinite alternate;

@keyframesではmarginで動きをつけていますが、transformでも良いですし、positionのtopやleftなどを利用してもいけると思います。

※当方、transformのtranslateXとtranslateYを別々の@keyframesで同時に指定するのに失敗しました。

@keyframes wobbling_y {
	0% {
		margin-top: 0px;
	}

	100% {
		margin-top: 8px;
	}
}