CSSで風船のユラユラ、フワフワ感を表現してみたぁ～！！

CSSで風船のフワフワ感を表現してみた!?
新しいCSSを調べながら何とか…!!

　私のスタイルシート(CSS)の知識は古く、装飾程度の簡単なモノしか作成することが出来ませんwww
　私の知識内で判断できる、少し動きのあるモノを創りたいと最近、CSS情報を漁っています。

• 【風船がフワフワ飛んでるイメージ】
  
  風船のアイコン画像をユラユラ、フワフワと上下に動かしたい・・・
  　アニメーション名・再生時間・変化する速度・再生回数(無限)・逆再生などの指示・・・
• 【スタイルシートの書き方】
  
  <style>
  .fusen {
  animation: fusen 10s ease-in-out infinite alternate;
  background: url(https://画像のurl) no-repeat center center / 180px auto;
  display: inline-block;
  transition: 1.5s ease-in-out;
  width: 180px;
  height: 180px;
  margin-top: 15px;
  border-radius: 50%;
  }
  @keyframes fusen {
  0% {
  transform:translate(0, 0) rotate(-15deg);
  }
  50% { transform:translate(0, -65px) rotate(0deg);
  }
  100% {
  transform:translate(0, 0) rotate(15deg);
  }
  }
  </style>
  <div class="fusen"></div>

　最初のanimation: fusen 10s ease-in-out infinite alternateはまとめて書いてあるのですがバラバラに書くと・・・

1. fusenはアニメーション名・・・animation-name: fusen;
2. 10sは再生時間・・・animation-duration: 10s;
3. ease-in-outは変化する速度・・・animation-timing-function: ease-in-out;
   
   • ease・・・少しゆっくり始まって、少しゆっくりになって終わる。
   • ease-in・・・ゆっくりと始まり、その後は等速で動く。
   • ease-out・・・等速で動き、最後はゆっくりと終わる。
   • ease-in-out・・・ゆっくり始まって加速し、ゆっくりになって終わる。easeよりもメリハリの効いた動になる。
   • linear・・・最初から最後まで等速で動く。


4. infiniteは再生回数(今回は無限)・・・animation-iteration-count: infinite;
5. alternateは逆再生の指示・・・animation-direction: alternate;

と指図するんですが短く書くと上記のような指示で書けると知りました。
　もう一つ、transition: 1.5s ease-in-out; のtransitionとは、要素の状態変化を滑らかなアニメーションで表現するためのプロパティで変化する際のかかる時間や速さを指定することが出来るんです。
　後は、ブログに動かす画像をアップロードしてbackground: url(https://画像のurl) 部分のhttps://画像のurlにアップ画像のURLを入力すれば動かすことが可能です。
　私の実力にしては、かなりイメージ通りに出来上がったように感じます。