ふわふわ

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

目次

オノマトペ

ふわふわ

ソースコード

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

ぽよぽよHTML

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

ぽよぽよCSS

/* 例は常時ふわふわ */
img.fuwa2 {
	animation: fuwa2 7s linear 0s infinite forwards;
}

@keyframes fuwa2 {
	  0% { transform: translateY(0); }
	 10% { transform: translateY(10px); }
	 20% { transform: translateY(0); }
	 30% { transform: translateY(-10px); }
	 40% { transform: translateY(0); }
	 50% { transform: translateY(-8px); }
	 60% { transform: translateY(0); }
	 70% { transform: translateY(6px); }
	 80% { transform: translateY(0); }
	 90% { transform: translateY(-8px); }
	100% { transform: translateY(0); }
}

使い方

  • ちょっとこのキャンペーンバナー「ふわふわ」させておいて！
  • 背景に雲の画面をゆっくり、「ふわふわ」させておいて！