【CSS】アニメーションで魅せる！アンダーラインにアニメーションをつける方法

2023.08.23

URLをコピーしました！

こんにちは。すずきです。

この記事ではCSSを使ったアンダーラインのアニメーション実装方法について解説します。

このような人にオススメ

CSSでアンダーラインを付ける方法が分からない
アンダーラインを付けたいが、そのままでは物足りない
アンダーラインにおしゃれなアニメーションを実装したい

共通部分の実装

共通で使用するHTMLを作成します。
以下のようなコードで、基本的なメニューを作成します。

アンダーラインの位置は、<a>タグのpaddingで調整しています。

<ul>
  <li>
    <a href="#">メニュー①</a>
  </li>
  <li>
    <a href="#">メニュー②</a>
  </li>
  <li>
    <a href="#">メニュー③</a>
  </li>
</ul>

ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 2rem;
}

a {
  position: relative;
  color: inherit;
  text-decoration: none;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 2px;
  background-color: gray;
}

フェードイン

ふわっと表れるアニメーションです。
opacityでアンダーラインの表示を切り替えています。
表示する速さはtransitionで指定しています。

a::after {
  opacity: 0;
  transition: all 0.3s;
}
a:hover::after {
  opacity: 1;
}

下からフェードイン

下からふわっと表れるフェードインです。
bottomの初期位置を下にずらし、:hoverで元の位置に戻るよう追加で指定します。

a::after {
  bottom: -4px;
  opacity: 0;
  transition: all 0.3s;
}
a:hover::after {
  bottom: 0;
  opacity: 1;
}

上からフェードイン

下からフェードインと同じ要領で、bottomの初期位置を上にずらします、

a::after {
  bottom: 4px;
  opacity: 0;
  transition: all 0.3s;
}
a:hover::after {
  bottom: 0;
  opacity: 1;
}

左から表示

アンダーラインが左から表示されるパターンです。

transform: scale(0, 1);でx軸の0倍に縮小し、:hover時に0にした倍率を元に戻します。
transform-originで縮小される時の位置を指定しています。

a::after {
  transform: scale(0, 1);
  transform-origin: left top;
}
a:hover::after {
  transform: scale(1, 1);
}

MDN Web Docs

scale() – CSS: カスケーディングスタイルシート | MDN scale() は CSS の関数で、二次元平面上における拡縮する座標変換を定義します。変倍の量がベクトルで定義されるため、水平方向と垂直方向に対して異なる変倍で大きさを変…

MDN Web Docs

transform-origin – CSS: カスケーディングスタイルシート | MDN transform-origin は CSS のプロパティで、要素の座標変換 (transform) における原点を設定します。

右から表示

先ほどの左から表示と同じ要領で、transform-originで位置を調整します。

a::after {
  transform: scale(0, 1);
  transform-origin: right top;
}
a:hover::after {
  transform: scale(1, 1);
}

左から表れ、右から消える

:hover時に左からアンダーラインが表れ、離すと右から消えます。
:hover時にtransform-originの位置を変更することで、右から消える動きを実装できます。

transition: all 0.3s;のままだとtransform-originにもかかってしまうので、個別指定に変更が必要です。

a::after {
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .3s;
}
a:hover::after {
  transform: scale(1, 1);
  transform-origin: left top;
}

右から表れ、左から消える

「左から表れ、右から消える」と同じ要領で、transform-originの位置を調整します。

a::after {
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .3s;
}
a:hover::after {
  transform: scale(1, 1);
  transform-origin: right top;
}

中央から表れる

最後に中央から表れるパターンです。
「左から表れ、右から消える」と同じ要領で、transform-originの位置を調整するだけで実装できます。

a::after {
  transform: scale(0, 1);
  transform-origin: center top;
}
a:hover::after {
  transform: scale(1, 1);
}

今回作成したアニメーション一覧は、以下でもまとめています。

See the Pen アンダーラインアニメーション by すずき (@k-suzuki3533) on CodePen.

終わりに

CSSを使ったアンダーラインのアニメーション実装方法について紹介しました。

アニメーションを実装することで以下のようなメリットがあるかと思います。

読者の注目を引くことができる
クリックを促すことができる
デザイン性が高くなる
読者の印象に残りやすくなる

CSSのみで簡単に実装できますので、ぜひ試してみてください！

URLをコピーしました！