CSSアニメーションで要素を上下にふわふわさせる簡単な方法

今回は、CSSだけで要素を上下にふわふわさせる方法を解説します。

まずは、デモ動画をご覧ください！

それではコードを記載しますね！

HTML

ベースとなるHTMLは下記になります。

<div>タグで記述しておりますが、<img>タグでも、動作します。

<div class="fluffy"></div>

CSS

「animation」プロパティで、要素を上下にふわふわさせております。

.fluffy {
  width: 100px;
  height: 100px;
  margin: 80px auto;
  background: #ff7650;

  /* アニメーション名 アニメーションにかかる時間 アニメーションの繰り返し回数 */
  /* fluffy 3秒 無限ループ */
  animation: fluffy 3s infinite;
}

@keyframes fluffy {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

今回は以上です！