ばいんばいん

タイプマイクロインタラクション系 その他 類似の音

目次

オノマトペ

常時ばいんばいん

hoverでばいんばいん

ソースコード

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

ばいんばいんHTML

<img src="/wp-content/themes/onmtp/imgs/bainnbainn.png" class="bainn2">

ばいんばいんCSS

/* 例は常時ばいんばいん */
img.bainn2 {
	animation: bainn2 .7s linear 0s infinite forwards;
}

@keyframes bainn2 {
	  0% { transform: translateY(0); }
	  5% { transform: translateY(1px); }
	 20% { transform: translateY(-15px); }
	 35% { transform: translateY(0); }
	 45% { transform: translateY(-8px); }
	 60% { transform: translateY(0px); }
	 70% { transform: translateY(-2px); }
	 75% { transform: translateY(0); }
	100% { transform: translateY(0); }
}

使い方

  • ちょっとこのキャラクター「ばいんばいん」させてくれぃ！
  • エラー通知を気づかせたいから「ばいんばいん」させておきたいなー