手軽にできるCSSアニメーションのご紹介

みなさんおひさしぶりです、クロコのコウです。
いやぁ、、、久しぶりのブログですね(笑)

今回は、CSSアニメーションで要素をバウンドさせたり、フワフワと浮かせる方法をご紹介しようと思います。

1 フワフワさせるCSSアニメーション
2 バウンドさせるCSSアニメーション
3 まとめ

フワフワさせるCSSアニメーション

See the Pen Vrgmqx by kuroko-kou (@24karats) on CodePen.

.fuwafuwa {
  width: 100px;
  height: 100px;
  margin: 100px;
  background: #000;
  animation: fuwafuwa 3s infinite;
}

@keyframes fuwafuwa {
  0% { transform:translateY(0px); }
  50% { transform:translateY(50px); }
  100% { transform:translateY(  0px); }
}

.fuwafuwa {

width: 100px;

height: 100px;

margin: 100px;

background: #000;

animation: fuwafuwa 3s infinite;

}

@keyframes fuwafuwa {

0% { transform:translateY(0px); }

50% { transform:translateY(50px); }

100% { transform:translateY( 0px); }

}

animation: fuwafuwa 3s infinite;
簡単に説明すると3秒かけてfuwafuwaを無限に実行して下さい、という意味ですね。
3秒かけて50px移動して、元の位置に戻ります。

バウンドさせるCSSアニメーション

See the Pen Bound by kuroko-kou (@24karats) on CodePen.

.bound {
  width: 100px;
  height: 100px;
  margin: 100px;
  background: #000;
  animation: bound 3s infinite;
}

@keyframes bound {
  0% { transform:translateY(0) }
  5% { transform:translateY(0) }
  10% { transform:translateY(0) }
  20% { transform:translateY(-25px) }
  25% { transform:translateY(0) }
  30% { transform:translateY(-15px) }
  50% { transform:translateY(0) }
  100% { transform:translateY(0) }
}

.bound {

width: 100px;

height: 100px;

margin: 100px;

background: #000;

animation: bound 3s infinite;

}

@keyframes bound {

0% { transform:translateY(0) }

5% { transform:translateY(0) }

10% { transform:translateY(0) }

20% { transform:translateY(-25px) }

25% { transform:translateY(0) }

30% { transform:translateY(-15px) }

50% { transform:translateY(0) }

100% { transform:translateY(0) }

}

このアニメーションも先程のアニメーションと一緒ですが、

20% { transform:translateY(-25px) }
30% { transform:translateY(-15px) }

この記述で2回移動して元に戻るという動きを出しています。

まとめ

いかがでしたか？今回紹介したアニメーションは基本の動きとなります。
バウンドするアニメーションは、強調したい箇所の上に置くと効果を発揮するのではないでしょうか？
最後に、CSSアニメーションはJqueryなどを使わずに簡単に実装できますが、あまり複数箇所で使用してしまうと
ホームページやブログに来たユーザーが離脱してしまう原因にもなりますので、使用する場合はほどほどにすることを
おすすめします。

この記事を書いた人
最新の記事

山下雄一郎

代表取締役：株式会社クロコロール

株式会社クロコロールの代表取締役。Webマーケティング、打ち合わせも担当。この業界は20年以上いて、Google検索とホームページのことを考えている。2023年にSEO検定3級と4級を取得。キーワード選定、ターゲット設定が得意で、SEO施策でアクセス数を60倍以上にしたことも。また、Googleビジネスプロフィールの講師やネットショップの講師も務める。キャンプ大好きで、「キャンプ行きたい」が口癖。