【CSS】hover時に左から右に下線を引くアニメーションの作り方

【CSS】hover時に下線を引くアニメーションの作り方

こんにちは。

ゆうや(@yuyaphotograph)です!

この記事では、

  • テキストにhoverした時に下線を引くアニメーションの実装方法を知りたい
  • CSSの疑似要素 afterを使ってアンダーラインアニメーションを実装したい

という方のお悩みを解決します!

下線アニメーションの使い所は?

今回紹介する下線アニメーションがよく使われるのはずばりナビゲーションメニューです!

 

下線アニメーション例

上の添付画像のようなメニューのリンクテキストをホバーした時に、左から右へ絶妙に心地良いスピードで下線が引かれるアニメーションよく目にするかと!

CSSのhoverと疑似要素 afterを駆使すれば誰でも簡単に実装できますのでさっそく見ていきましょう〜

下線は疑似要素 afterで実装

下線は下線を引きたい要素のafterで実装!

HTMLは以下を使用します。

下線アニメーションのHTML
<a href="#" class="Item">
  <span class="Item-Text">下線アニメーション</span>
</a>

spanタグで囲った要素に下線が引かれる仕様です。

 

CSSは以下を使用します。

下線アニメーションのCSS
.Item{
  text-decoration: none;
  color: #5bc8ac;
  font-size: 24px;
}
.Item-Text{
  position: relative;
  z-index: 1;
}
.Item-Text:after{
  content: '';
  position: absolute;
  left: 0;
  bottom: -10px;/*テキストからの距離*/
  width: 0%;/*初期状態では下線非表示*/
  height: 2px;/*下線の高さ*/
  background: #5bc8ac;/*下線の色*/
  z-index: -1;
  transition: all 0.4s;/*アニメーション速度*/
}
.Item:hover .Item-Text:after{
  width: 100%;/*hover時に表示*/
}

上記コードのポイントは、下線の横幅を初期状態でwidth:0%にしておき、親要素がhoverされた時にwidth:100%にする点です。

アニメーションのスピードはtransition: all 0.4sの数値をよしなに変更してくださいまし。

下線アニメーションデモ

今回のデモです。

「下線アニメーション」というリンクテキストに実際にホバーしてヌルっと感を味わってくださいまし。

See the Pen
ZEGVXOv
by 石森裕也 (@yuyaphotograph)
on CodePen.

下線アニメーションが使われているWebサイト

下線アニメーションが使われている実際のWebサイトで参考になりそうなものを2つ紹介!

TVアニメ「ソードアート・オンライン アリシゼーション」公式サイト

ONE PIECE.com(ワンピースドットコム)

まとめ

今回紹介した「hover時の下線アニメーション」は実際のコーディング案件での使用頻度が比較的高いTipsです!

こういった少しのエフェクトがあるだけでちょっぴりサイトがおしゃんになるのでぜひ使ってみてください〜

「CSSやJSのアニメーションをもっと知りたい!」

という方は以下の記事も目を通してみてくださいまし〜

スクロールアニメーションをjQueryなしで簡単実装できるライブラリ AOSの使い方スクロールアニメーションをjQueryなしで簡単実装できるライブラリ AOSの使い方 CSSアニメーションで上から下に動き続ける円を作る方法CSSアニメーションで上から下に動き続ける円を作る方法

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です