熊本県でWeb、EC、IoTなら株式会社クロコロール

Kuroko Blog

クロコブログ

手軽にできる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.

クロコのコウ

株式会社クロコロールでWebディレクション、構築を担当しています。 弊社のあきま先生によりつけ麺を覚えさせられブクブクと成長中…

«

»

CATEGORY

Google Photography MakeShop NEWS CSS/HTML Wordpress Amazon Yahoo!ショッピング Other