こんにちは、Webプログラマーのトムです。
今回はボタンにホバー（マウスを乗せた）した時にボタンの透明度やフォント等の要素をアニメーションで変化させてみようと思います。
以前にFontAwesomeを利用したSNSのアイコンの表示方法を解説しましたが、今回はその時のコードを流用したいと思います。
ホバー時に要素をアニメーションさせる方法
ホバー時に要素をアニメーションさせる方法は、以下の２つの手順で実現できます。
- CSSで「セレクタ:hover」の中で、アニメーション後の状態を定義する
- セレクタの中でtranstionプロパティを設定する。
例として、ボタンの透明度(opacity)をホバー時に変更（色を濃くする）させてみましょう。
実行例（１）
See the Pen SNS_icon_02 by トム@株＆不動産投資・Webプログラマー (@roby_tom) on CodePen.
ボタンを表すクラス”social-icon-btn”ではopacity(透明度)が0.7に設定されていますので、デフォルトではボタンがやや透明になっています。
そして上述したように、まず”social-icon-btn”のhoverでopacity:1.0 (=透明度ゼロ)に設定します。次に “social-icon-btn” の中で”transtion”プロパティを設定し、値として変化させるプロパティである”opacity”と、変化に要する時間(1s=1秒)を設定します。これにより円形のボタンにホバーすると、1秒掛けて徐々にボタンの色を濃くすることができます。
次に透明度だけでなくSNSアイコンも同時に大きくしてみましょう。SNSアイコンはフォントでもありますので、↓の方法はアニメーションでフォントを大きくする方法にもなります。
実行例（２）
See the Pen SNS_icon_03 by トム@株＆不動産投資・Webプログラマー (@roby_tom) on CodePen.
実行例（１）と異なる箇所は、hoverの中でフォントサイズとフォントの表示位置(padding-top)を変更させている点と、transitionの値をopacityからallに変更した点です。フォントサイズは当然として、表示位置(padding-top)を変更させた理由は、この指定が無いとフォントの拡大が画面の下方向に向かって行われるためです。フォントの中心位置をずらさずに拡大させるためにはpadding-topの値を小さくしてフォントの拡大が上方向にも行われるようにしなければなりません。
また今回はボタンの濃さとフォントサイズの２つの要素を同時に変化させています。その場合transitionの引数として、変化させる全てのプロパティを指定する”all”を記述します。
以上、CSSでホバー時にボタンの透明度やフォントをアニメーションで変化させる方法について解説しました！