手軽にできるCSSアニメーションのご紹介
みなさんおひさしぶりです、クロコのコウです。
いやぁ、、、久しぶりのブログですね(笑)
今回は、CSSアニメーションで要素をバウンドさせたり、フワフワと浮かせる方法をご紹介しようと思います。
フワフワさせるCSSアニメーション
See the Pen Vrgmqx by kuroko-kou (@24karats) on CodePen.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.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などを使わずに簡単に実装できますが、あまり複数箇所で使用してしまうと
ホームページやブログに来たユーザーが離脱してしまう原因にもなりますので、使用する場合はほどほどにすることを
おすすめします。
The following two tabs change content below.
山下 雄一郎
代表取締役 : 株式会社クロコロール
私の担当は、Google検索を基礎としたWebマーケティングと売れるキーワードをさがすキーワードマーケティングを行っています。収益化をするためのにGoogle検索、Googleマイビジネス、YouTube、Instagram、LINE公式アカウント、ホームページ、ランディングページ、ネットショップ、
アクセス解析、ヒートマップ分析、キーワード選定を行い、お客様の創業時の伴奏支援や構築業務を行っています。
最新記事 by 山下 雄一郎 (全て見る)
- 小規模持続化補助金 無料相談受付しています - 2022年4月11日
- メールテンプレート設定はYahoo!のショッピングの構築で忘れがち! - 2022年1月15日
- ネットショップって、何商品くらい登録できるの? - 2021年12月10日