Webデザインでよく使うアンダーライン(下線)アニメーションのサンプルです。
ナビゲーションなどによく使われている使用頻度の高いもの3パターンになります。
#左からフェードインする下線
hoverすると左から右へアンダーラインが引かれます。カーソルを離すと左へ戻ります。
See the Pen 左からフェードインする下線 by m-akagi (@kanna999-) on CodePen.
#下から上へフェードインする下線
hoverすると下から上へアンダーラインがフェードインします。カーソルを離すと下に戻ります。
See the Pen 下から上へフェードインする下線 by m-akagi (@kanna999-) on CodePen.
#中央から左右に伸びる下線
hoverすると中央から左右に線が伸びます。カーソルを外すと中央に戻ります。
See the Pen 中央から左右に伸びる下線 by m-akagi (@kanna999-) on CodePen.