ぶるぶる

タイプマイクロインタラクション系 ボタン・リンク系 類似の音

目次

オノマトペ

常時ぶるぶる

hoverでぶるぶる

ソースコード

あくまでも一例なので参考程度に使ってください。

ぶるぶるHTML

<img src="画像のパス.png" class="buru2">

ぶるぶるCSS

/* 例は常時ぶるぶる */
img.buru2 {
	animation: buru2 .3s linear 0s infinite forwards;
}

@keyframes buru2 {
	    0% { transform: translate(0,0); }
	   10% { transform: translate(2px,2px); }
	   20% { transform: translate(0,2px); }
	   30% { transform: translate(0,-2px); }
	   40% { transform: translate(-2px,-1px); }
	   50% { transform: translate(1px,1px); }
	   60% { transform: translate(2px,-2px); }
	   70% { transform: translate(-2px,0); }
	   80% { transform: translate(-1px,1px); }
	   90% { transform: translate(0,0); }
	  100% { transform: translate(-2px,0); }
}

使い方

  • ちょっとこのキャラクター「ぶるぶる」させてくれぃ！
  • エラーが起きた時このブロック全体を「ぶるぶる」させられたらいいな