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

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

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

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

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

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

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

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

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

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

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

まとめ

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

The following two tabs change content below.

山下 雄一郎

代表取締役株式会社クロコロール
私の担当は、Google検索を基礎としたWebマーケティングと売れるキーワードをさがすキーワードマーケティングを行っています。収益化をするためのにGoogle検索、Googleマイビジネス、YouTube、Instagram、LINE公式アカウント、ホームページ、ランディングページ、ネットショップ、 アクセス解析、ヒートマップ分析、キーワード選定を行い、お客様の創業時の伴奏支援や構築業務を行っています。
内容がよかったら、シェアをお願いします!
一覧へ戻る

INSTAGRAM

OFFICIAL LINE ACCOUNT

FACEBOOK