マウスカーソルが乗ったら下線が伸びるアニメーションの作り方

こんにちは、ゆんつです。

リンクやボタンにマウスカーソルを乗っけたときのアニメーションにはいろんなものがあります

そのようなアニメーションの中で良く見かけるのが、マウスカーソルを乗っけると下線が伸びるアニメーションです。

今日は

リンクにマウスカーソルを乗っけた時に、左や右、または中心から下線が伸びるアニメーションを作り方

について、書きたいと思います。

左または右から下線が伸びる

考え方はとても簡単です。

アンダーラインを付けたい要素に線のスタイルを設定した疑似要素を付け、widhtは0にしておきます。

そして、その疑似要素にマウスが乗った時にwidthが100%になるように設定し、変化のスピードがゆっくりアニメーションするようにtransitionを付けてあげれば良いだけです。

具体的に書いてみます。

See the Pen
left by konpure (@yuntu)
on CodePen.

リンクにマウスを乗っけると、左から右へアンダーラインがにょろ～んと出現してくることと思います。

疑似要素に設定しているleftをrightに変更すれば線の始点が右に変わり、マウスがリンクに乗った時に右から左へにょろ～んと線が伸びてきます。

See the Pen
right by konpure (@yuntu)
on CodePen.

真ん中から左右の端っこにむかってアンダーラインを伸ばしたい場合は、これまでとは少しだけ考え方が変わります。

これまでは左端又は右端がアンダーラインの出発点でしたが、この出発点を中心に移動させ、中心から左に伸びる線と、中心から右に伸びる線という2つの疑似要素を作る必要があります。

ですので、疑似要素は2つ追加します。

そして片方はleft: 50%もう片方はright: 50%として出発点を要素の中心に移動させます。

widthについても、左右からアンダーラインが伸びるときはホバー時のwidhtを100%にしていましたが、2つの疑似要素は要素の中心から始まるので、50%ずつwidthを設定すれば合計で100%の長さになることになります。

よって、各疑似要素のホバー時のwidthは50%となります。

実際に作ってみます。

See the Pen
center by konpure (@yuntu)
on CodePen.

リンクにマウスを乗せると、中心から線が伸びて左右の両端に到達するようになっていると思います。

以上が、リンクにマウスカーソルを乗せた時に伸びてくる3パターンのアンダーラインアニメーションです。

それでは、またー。