ページ上でふわふわ動くアニメーション

ふわふわ動くイラスト・素材をページ上に置きたいときのためのアニメーション
イベント系やお子さま向けのサイトでちょっと使うと楽しそうな雰囲気になるし、
ページトップボタンや矢印など注意を引きたいパーツに使うのもいいですよね
設定にはkeyframeを使います
＊イラストはそのうち変わる予定

①鯉
class=”koi”
fuwaA

②花
class=”hana”
fuwaB

③傘
class=”kasa”
fuwaC

①鯉
3秒かけて「下に動き戻ってくる」

HTML

<img src="koi.png" class="koi">

CSS

.koi{
	animation: fuwaA 3s linear infinite;
	}

@keyframes fuwaA {
  0% {
	transform: translateY(0px);
  }
  50% {
	transform: translateY(30px);
  }
  65% {
	transform: translateY(20px);
  }
  100% {
	transform:  translateY(0px);
  }
}

②花
10秒かけて「上に動き戻って来る」

HTML

<img src="hana.png" class="hana">

CSS

.hana{
	animation: fuwaB 10s linear infinite;
	}

@keyframes fuwaB {
  0% {
	transform: translateY(0px);
  }
  50% {
	transform: translateY(-30px);
  }
  65% {
	transform: translateY(-20px);
  }
  100% {
	transform:  translateY(0px);
  }
}

③傘
3秒かけて「右に動き戻って来る」

HTML

<img src="kasa.png" class="kasa">

CSS

.kasa{
	animation: fuwaC 10s linear infinite;
	}

@keyframes fuwaC {
  0% {
	transform: translateX(0px);
  }
  50% {
	transform: translateX(30px);
  }
  65% {
	transform: translateX(20px);
  }
  100% {
	transform:  translateX(0px);
  }
}