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);
  }
}

 

今回は以上です!

SNSでもご購読できます。

コメントを残す

前の記事

次の記事