シェアアイコンをFABにする
- シェアボタンにアクションをつけたい。
- シェアボタンをフローティングアクションボタン（FAB）にする。
ココがポイント
結論：
CSSの「animation」を使用すると動きをつけられる。
皆様こんにちは。ユウスケと申します。
日々の生活で役立つ情報を発信しています。
皆様は、シェアボタンを記事内に追加したい、画面スクロールに合わせて移動させたい。
そのように、Webページをレイアウトしたいそう思ったことはありませんか？
今回は、継続的にアクションをして目立つフローティングアクションボタン（FAB）に、シェアボタンをしてみようと思います。
目次
1.「FAB」とは
「FAB」とは、フローティングアクションボタンの略であり、UIの上に浮く丸いアイコンのような形でデザインします。製品ストーリーの重要な部分を表現するためのツールとしてよく使われます。
もっと詳しく
FABは、CSSで簡単にデザインできるので、是非目立たせたいアイコンに使用してみてください。
2.継続的に動き続けるアニメーション
2.Pattern1_ホッピングするFAB
See the Pen
infinitePoping-animation by 三好雄介 (@yusuke5028198)
on CodePen.
今回は、継続的にホッピングするアニメーションの名前「infinitePoping」で登録し、セレクタで選んだオブジェクトに「animation」プロパティを使って呼び出しています。値に「infinite」を使用すると継続的なアニメーションになります。
「/*アニメーションの登録*/」以降に、自作のアニメーションを記録すれば、思い通りのアニメーションにできます。
3.ポインターを合わせたら動くアニメーション
3.Pattern1_Y軸方向に回転してズームする
See the Pen
rotateY_scaleUP-animation by 三好雄介 (@yusuke5028198)
on CodePen.
3.Pattern2_回転してアイコン変更、最後にPOP
See the Pen
rotateAndPop-animation by 三好雄介 (@yusuke5028198)
on CodePen.
3.Pattern3_ズームアウトしてズームインする
See the Pen
scaleDownToUp-animation by 三好雄介 (@yusuke5028198)
on CodePen.
もっと詳しく
