- 公開日
手軽にできる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.
山下 雄一郎
代表取締役 : 株式会社クロコロール
株式会社クロコロールの代表取締役。Webマーケティング、打ち合わせも担当。この業界は20年以上いて、Google検索とホームページのことを考えている。SEO検定1級を取得。キーワード選定、ターゲット設定が得意で、SEO施策でアクセス数を60倍以上にしたことも。また、Googleビジネスプロフィールの講師やネットショップの講師も務める。キャンプ大好きで、「キャンプ行きたい」が口癖。
最新記事 by 山下 雄一郎 (全て見る)
- 【初心者向け】ストック型メディアとは?ホームページを育てて成果を出す基本戦略! - 2025年2月1日
- ホームページが更新できない理由と対処の秘訣! - 2025年1月25日
- 助成金でホームページを作りたい方必見!当社の支援は? - 2025年1月19日