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

CSS アニメーション サンプル集,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だけでも実装する事ができます。