実案件で頻出するナビゲーションなどのリンクホバー時に作動するエフェクト・アニメーションを備忘録としてまとめます。
左から右に下線が流れ、ホバーアウトで左に戻る
See the Pen left to right by nkmr (@nkmr_whoo) on CodePen.
ホバーするとアンダーラインが左から右に引かれ、ホバーアウトすると左に戻っていくタイプです。
左から右に流れ、ホバーアウトで右に消える
See the Pen left to right 2 by nkmr (@nkmr_whoo) on CodePen.
ホバーするとアンダーラインが左から右に引かれ、ホバーアウトすると右に消えていくタイプです。
中央から横幅100%に広がり、ホバーアウトで中央に戻る
See the Pen center to 100% by nkmr (@nkmr_whoo) on CodePen.
ホバーするとアンダーラインが中央からテキストの横幅100%まで広がり、ホバーアウトすると中央に戻るタイプです。
まとめ
今後も頻出するパターンを発見したら追記していきます。
