ホバーアニメーションとは

ホバーアニメーションとは、ホバー（マウスオーバー）時に下線や背景などを動かすアニメーションのことを言います。

ホバーは基本的にPCサイトで使用される動作です。スマートフォンやタブレットで閲覧した際は、指でタップした瞬間がホバー状態となります。リンクボタンの場合、アニメーションが全て実行される前にページ推移してしまいますので、注意が必要です。

今回はシンプルですが、リンクなどに使用されるホバーアニメーションの作り方をご紹介します。

左から下線が引かれるアニメーション

最初にご紹介するのは、ホバー時にテキストの左下から右方向に伸びるアニメーションのご紹介です。

HTML

<!-- 左から下線が引かれるアニメーション -->
<nav>
  <ul>
    <li><a href="#" class="btn">Home</a></li>
    <li><a href="#" class="btn">About</a></li>
    <li><a href="#" class="btn">Service</a></li>
    <li><a href="#" class="btn">Contact</a></li>
  </ul>
</nav>

CSS

/* 全ての余白を削除 */
* {
  margin: 0;
  padding: 0;
}

/* 画面の中央に表示 */
nav {
  /* Flexを指定 */
  display: flex;
  /* 垂直（縦）方向の中央 */
  align-items: center;
  /* 水平（横）方向の中央 */
  justify-content: center;
  /* divの高さを画面いっぱいに変更 */
  height: 100vh;
}

/* リンクのリスト化 */
ul{
  /* 横並びするためにflexを設定 */
  display: flex;
  /* li間の余白を設定 */
  gap: 20px;
  /* 先頭の記号を削除 */
  list-style: none;
}

/* aタグの基本設定 */
a{
  /* 全体をクリックさせるためにblock化 */
  display: block;
  /* beforeとafterをabsoluteで位置設定するための親要素としてrelativeを設定 */
  position: relative;
  /* 文字色 */
  color: #333;
  /* 中央に設置 */
  text-align: center;
  /* リンクの下線を削除 */
  text-decoration: none;
}

/* 左から下線が引かれるアニメーション */
.btn::after{
  /* beforeとafterを使用する時は必ず入力 */
  content: "";
  /* リンクに指定した横幅いっぱいになる様、block化 */
	display: block;
  /* 位置設定 */
	position: absolute;
  /* 左 */
	left: 0;
  /* 下 */
	bottom: 0;
  /* 下線の横幅 */
	width: 100%;
  /* 下線の高さ */
	height: 2px;
  /* 下線の色（背景） */
	background-color: #333;
  /* 横方向の伸縮設定。初期値は0 */
	transform: scaleX(0);
  /* 伸縮の初期設置場所。左下 */
	transform-origin: left bottom;
  /* .5秒でアニメーション */
	transition: all .5s;
}
/* マウスオーバー時の下線 */
.btn:hover::after{
  /* 横方向の伸縮設定。1にして元の100％に戻す */
	transform: scaleX(1);
}

実装

See the Pen hover-animation1 by DREAM NET WORKS (@dnw) on CodePen.

中央から左右に広がるアニメーション

次は、リンクの中央から左右に背景が広がるアニメーションのご紹介です。

HTML

<!-- 中央から左右に広がるアニメーション -->
<nav>
  <ul>
    <li><a href="#" class="btn">Home</a></li>
    <li><a href="#" class="btn">About</a></li>
    <li><a href="#" class="btn">Service</a></li>
    <li><a href="#" class="btn">Contact</a></li>
  </ul>
</nav>

CSS

/* 全ての余白を削除 */
* {
  margin: 0;
  padding: 0;
}

/* 画面の中央に表示 */
nav {
  /* Flexを指定 */
  display: flex;
  /* 垂直（縦）方向の中央 */
  align-items: center;
  /* 水平（横）方向の中央 */
  justify-content: center;
  /* divの高さを画面いっぱいに変更 */
  height: 100vh;
}

/* リンクのリスト化 */
ul{
  /* 横並びさせるためにflexを設定 */
  display: flex;
  /* li間の余白を設定 */
  gap: 20px;
  /* 先頭の記号を削除 */
  list-style: none;
}

/* aタグの基本設定 */
a{
  /* 全体をクリックさせるためにblock化 */
  display: block;
  /* beforeとafterをabsoluteで位置設定するための親要素としてrelativeを設定 */
  position: relative;
  /* 文字色 */
  color: #333;
  /* 中央に設置 */
  text-align: center;
  /* リンクの下線を削除 */
  text-decoration: none;
}

/* 中央から左右に広がるアニメーション */
.btn{
  /* .5秒でアニメーション */
  transition: all .5s;
}
/* リンクのマウスオーバー時 */
.btn:hover{
  /* 文字色を白に変更 */
  color: #FFF;
}
/* アニメーションする背景の設定 */
.btn::after{
  /* beforeとafterを使用する時は必ず入力 */
  content: "";
  /* リンクに指定した横幅いっぱいになる様、block化 */
  display: block;
  /* 位置設定 */
  position: absolute;
  /* 上 */
  /* 高さを100%にするのでtop（上）でもbottom（下）でもOK */
  top: 0;
  /* beforeとafterは設定した要素より表示順が高くなるので1段階下げる */
  z-index: -1;
  /* 横幅 */
  width: 100%;
  /* 高さ */
  height: 100%;
  /* 背景色 */
  background-color: #333;
  /* 横方向の伸縮設定。初期値は0 */
  transform: scaleX(0);
  /* 横方向の伸縮設定。初期値は0 */
  transform-origin: center bottom;
  /* .5秒でアニメーション */
  transition: all .5s;
}
.btn:hover::after{
  transform: scaleX(1);
}

擬似要素（::before / ::after）を使用しているため、z-index（重なり順）を下げないとテキストが隠れてしまうので注意が必要です。

実装

See the Pen hover-animation2 by DREAM NET WORKS (@dnw) on CodePen.

左右から背景が閉じるアニメーション

最後は、先ほどとは逆に、左右から中央に向けて背景が閉じるアニメーションのご紹介です。

HTML

<!-- 左右から背景が閉じるアニメーション -->
<nav>
  <ul>
    <li><a href="#" class="btn">Home</a></li>
    <li><a href="#" class="btn">About</a></li>
    <li><a href="#" class="btn">Service</a></li>
    <li><a href="#" class="btn">Contact</a></li>
  </ul>
</nav>

CSS

/* 全ての余白を削除 */
* {
  margin: 0;
  padding: 0;
}

/* 画面の中央に表示 */
nav {
  /* Flexを指定 */
  display: flex;
  /* 垂直（縦）方向の中央 */
  align-items: center;
  /* 水平（横）方向の中央 */
  justify-content: center;
  /* divの高さを画面いっぱいに変更 */
  height: 100vh;
}

/* リンクのリスト化 */
ul{
  /* 横並びさせるためにflexを設定 */
  display: flex;
  /* li間の余白を設定 */
  gap: 20px;
  /* 先頭の記号を削除 */
  list-style: none;
}

/* aタグの基本設定 */
a{
  /* 全体をクリックさせるためにblock化 */
  display: block;
  /* beforeとafterをabsoluteで位置設定するための親要素としてrelativeを設定 */
  position: relative;
  /* 文字色 */
  color: #333;
  /* 中央に設置 */
  text-align: center;
  /* リンクの下線を削除 */
  text-decoration: none;
}

.btn{
  /* .5秒でアニメーション */
  transition: all .5s;
}
.btn:hover{
  color: #FFF;
}
.btn::before{
  /* beforeとafterを使用する時は必ず入力 */
  content: "";
  /* リンクに指定した横幅いっぱいになる様、block化 */
  display: block;
  /* 位置設定 */
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
  width: 50%;
  height: 100%;
  background-color: #333;
  transform: scaleX(0);
  transform-origin: left bottom;
  /* .5秒でアニメーション */
  transition: all .5s;
}
.btn:hover::before{
  transform: scaleX(1);
}
.btn::after{
  content: "";
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: 50%;
  height: 100%;
  background-color: #333;
  transform: scaleX(0);
  transform-origin: right bottom;
  transition: all .5s;
}
.btn:hover::after{
  transform: scaleX(1);
}

実装

See the Pen hover-animation3 by DREAM NET WORKS (@dnw) on CodePen.