ぷるぷるっと震えるCSSアニメーションサンプル

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

CSSを使って一定間隔でぷるぷるっと震えるアニメーションのサンプルコードです。

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

サンプルでは円のHTML要素を作成して、一定間隔でぷるぷると震わせるようなアニメーションを書いています。

<div class="circle"></div>

.circle {
	width: 80px;
	height: 80px;
	background: #7fffbf;
	border-radius: 50%;
	animation: purupuru_anim 1s infinite alternate;
}

.circle {
	width: 80px;
	height: 80px;
	background: #7fffbf;
	border-radius: 50%;
	animation: purupuru_anim 1.5s infinite;
}

@keyframes purupuru_anim {
	0% {	transform: translate(0, 0);}
	5% {	transform: translate(-5px, -0);}
	10% {	transform: translate(5px, 0);}
	15% {	transform: translate(-5px, -0);}
	20% {	transform: translate(5px, 0);}
	25% {	transform: translate(-5px, -0);}
	30% {	transform: translate(0, 0);}
	100% {	transform: translate(0, 0);}
}

animationの指定は、purupuru_anim（アニメーション名）1.5s（アニメーション時間） infinite（無限ループ）となっています。

animationプロパティで、繰り返し処理中に遅延処理は、@keyframesの中で実装しています。
例えば0～50％がアニメーション、51％～100％が待機時間のようにする事でCSSだけでも実装する事ができます。