リンクボタンにホバーした際、異なる背景色を左から右にスライドさせるアニメーションをスタイルシートで実装する方法を紹介。
ソースコード
See the Pen Untitled by JeyJapan (@st-lite-jn) on CodePen.
HTML
<a href="hogehoge.html" class="button">ボタン</a>スタイルシート
.button {
display: inline-block;
padding: 8px 16px;
background: linear-gradient(90deg, #FFF 0%, #FFF 50%, #000 50% , #000 100%);
background-size: 200%;
background-position: 100% 0%;
border : solid 1px #000;
text-decoration:none;
color: #FFF;
}
.button:hover {
animation : keybgPositionSlide ease .5s both;
color:#000;
}
@keyframes keybgPositionSlide {
0% {
background-position: 100% 0%;
}
100% {
background-position: 0% 0%;
}
}実装方法の解説
ソースコードではaタグをボタン風に装飾してホバーアニメーションを実装しています。
aタグには「button」というclassを設定します。
「button」classをスタイルシートで装飾します。
プロパティの中で重要なのが「display」・「background」・「background-position」・「background-size」です。
/今回のホバーアニメーションの実装には高さと幅が必要なので、displayには「inline-block」を設定します。
display: inline-block;backgroundプロパティで指定している「linear-gradient」は背景をグラデーションにする場合などに使用するスタイルシートですが、領域を指定することで複数の色を背景色に指定することができます。
今回はホバーで2色の色を切り替えます。またこのとき背景色を左から右にアニメーションをさせる都合により、ホバー後の背景色→ホバー前の背景色の順番で指定します。以下の例はホバー前の背景色は黒でホバー後の背景色は白になります。
またデフォルトでは上から下方向に色が変わるため「90deg」で回転させ、左から右に色が変わるようにしています。
background: linear-gradient(90deg, #FFF 0%, #FFF 50%, #000 50% , #000 100%);このままだと背景色が半分白、半分黒のボタンになってしまいます。
このためまず背景サイズをbackground-sizeで倍にします。
background-size: 200%; 次にbackground-positionで背景色の位置をずらします。background-positionは横軸・縦軸の順番に指定します。
ソースコードでは横軸を100%ずらしています。background-sizeで背景のサイズを2倍にしているため、ちょうど黒色の背景だけ表示される形になります。
background-position: 100% 0%;「.button:hover」でホバー時のアニメーションを設定します。
animationプロパティでアニメーション名、変化の仕方、アニメーション完了までの時間、アニメーション完了後の表示を指定します。
.button:hover {
animation : keybgPositionSlide ease .5s both;
color:#000;
}上記で指定したアニメーション名にアニメーション開始時と終了時のスタイルシートを記述します。
今回は背景色を左から右にスライドさせることで背景色の切り替えを表現するので、「background-position:」横軸の位置を「100%」から「0%」に移動させるように指定します。
@keyframes keybgPositionSlide {
0% {
background-position: 100% 0%;
}
100% {
background-position: 0% 0%;
}
}以上で実装は完了です。
今回は単色の背景色を切り替える形にしていますが、応用すればグラデーションで表現することも可能です。
ぜひ参考してみてください。