申し訳ございません。
このサイトはお使いのブラウザに対応しておりません。
別のブラウザをご利用ください。

blog

home blog マウスホバーした時のアンダーラインアニメーション7つ

マウスホバーした時のアンダーラインアニメーション7つ

グローバルメニューなどでよく見かける、マウスホバーしたら下線がスッと出てきて離れたら消える、そんなアニメーションの実装をしたいと思います。

目次

  1. 基本のHTML & CSS
  2. 上からフェードイン
  3. 下からフェードイン
  4. 左から出て、左へ戻る
  5. 右から出て、右へ戻る
  6. 左から出て、右に向かう
  7. 右から出て、左に向かう
  8. 中央から左右に広がる
  9. コード解説
  10. まとめ

基本のHTML & CSS

7つのアニメーションを見ていきますが、すべてに共通するコードです。

次の項目からは、追加コードのみ記載しています。

追加CSSにはクラス名に番号が振ってありますが、適宜名前を変更してください。

<p class="sample"><a href="">テキストテキスト</a></p>
.sample a {
  position: relative;
  display: inline-block;
  text-decoration: none;
}

.sample a::after {
  content: '';
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  background-color: #333;
}

上からフェードイン

.sample1 a::after {
  bottom: 2px;
  opacity: 0;
  transition: .3s;
}

.sample1 a:hover::after {
  bottom: -4px;
  opacity: 1;
}

下からフェードイン

.sample2 a::after {
  bottom: -8px;
  opacity: 0;
  transition: .3s;
}

.sample2 a:hover::after {
  bottom: -4px;
  opacity: 1;
}

左から出て、左へ戻る

.sample3 a::after {
  bottom: -4px;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: .3s;
}

.sample3 a:hover::after {
  transform: scale(1, 1);
}

右から出て、右へ戻る

.sample4 a::after {
  bottom: -4px;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: .3s;
}

.sample4 a:hover::after {
  transform: scale(1, 1);
}

左から出て、右に向かう

.sample5 a::after {
  bottom: -4px;
  transform: scale(0, 1);
  transform-origin: right top;
}

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

右から出て、左に向かう

.sample6 a::after {
  bottom: -4px;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .3s;
}

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

中央から左右に広がる

.sample7 a::after {
  bottom: -4px;
  transform: scale(0, 1);
  transform-origin: center top;
  transition: .3s;
}

.sample7 a:hover::after {
  transform: scale(1, 1);
}

コード解説

<a>に疑似要素としてアンダーラインを作成し、ホバー前後で状態変化させます。

フェードイン系のアニメーションでは位置とopacityを、伸び縮みする系にアニメーションでは、x軸方向のスケールを変化させています。

transform-originは要素を変形させる時の起点を表し、それによって左から線を伸ばしたり、出た方と反対側に線を戻したりしています。

sample5sample6ではtransitiontransformを指定しないとガタつきます。

まとめ

いかがでしたか?

ただ下線を引くだけののアニメーションでも、様々な表現が可能です。

自分なりにカスタマイズしてみてください。

最後までご覧いただきありがとうございました。