小刻みに震えるCSSアニメーションサンプル集

2019-03-262023-02-22CSS アニメーション サンプル集,CSS

文字や画像の要素が小さく小刻みに震えるCSSアニメーションのサンプルコードです。

このサンプルコードはanimationプロパティ、@keyframesを利用しています。

小刻みに震えるdiv要素のCSSアニメーション

div要素を@keyframesを使ったCSSアニメーションで小刻みに震えている様な表現をします。

See the Pen CSS Shake in small steps animation by yochans (@yochans) on CodePen.

<div class="shake"></div>

.shake {
	animation: shake .1s linear infinite;
	width: 50px;
	height: 50px;
	background: #0091EA;
	margin: 20px;
}

@keyframes shake {
	0% {
		transform: translateX(0);
	}

	40% {
		transform: translateX(-3%);
	}

	80% {
		transform: translateX(3%);
	}

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

記サンプルでは0.1秒という短いスパンでひとつのアニメーションを実装しています。

infiniteを設定する事で無限ループにしています。

上要素を短い間隔で左右に動かして震えている様に表現していますが、要素の大きさによって振れ幅の見え方が変わってくるので、幅（%）の値を増減して調節します。

小刻みに震える文字のCSSアニメーション

文字の場合は、細かく震えさせ過ぎるとテキストを読みにくくなるので、読める範囲のアニメーション速度や動作範囲に調節していきます。

See the Pen CSS Shake in small steps animation by yochans (@yochans) on CodePen.

<p class="shake">小刻みに震える</p>

.shake {
	animation: shake .15s linear infinite;
	font-size: 50px;
	font-weight: bold;
	margin: 20px;
}

@keyframes shake {
	0% {
		transform: translateX(0);
	}

	40% {
		transform: translateX(-0.5%);
	}

	80% {
		transform: translateX(0.5%);
	}

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

テキストの場合も、フォントサイズの大きさや文字数によって見え方が変わってくるので、振れ幅やアニメーション時間を調節します。

また、イージングを変更する事でより動的なアニメーションを実装できるかもしれません。