線を引くようなアニメーション

よくグローバルメニューなどにマウスオーバーするとその要素に下線がアニメーション表示されるのを見かけます。ちょっとしたアニメーションがあるだけで、気持ちおしゃれに見えるから不思議。ということで、HTMLとCSSでの下線アニメーションをまとめておきます。

HTMLの以下のコードを使用して、CSSの設定を行います。

<ul>
  <li><a href="">MENU01</a></li>
  <li><a href="">MENU02</a></li>
  <li><a href="">MENU03</a></li>
  <li><a href="">MENU04</a></li>
  <li><a href="">MENU05</a></li>
</ul>

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

左から右へのアニメーションは以下のように設定します。

ul {
  display: flex;
  list-style: none;
}
li {
  padding: 5px;
}
a {
  display: block;
  padding: 0 0 5px;
  text-decoration: none;
}
a::after {
  border-bottom: solid 2px #f00;
  bottom: 0;
  content: "";
  display: block;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  width: 0;
}
a:hover::after {
  width: 100%;
}

a要素の擬似要素afterに対して、transitionを設定してアニメーションの準備。a要素の疑似クラスhoverにマウスオーバーした時にwidthを100%にするように設定します。したがって、a要素の擬似要素afterのwidthを0にしておきます。これでいい感じでアニメーションが動作します。

下線が左から右に引かれるアニメーションの動作確認

動作確認のサンプルは以下のとおりです。マウスオーバーしてみましょう。

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

次に右から左へアニメーションさせます。

ul {
  display: flex;
  list-style: none;
}
li {
  padding: 5px;
}
a {
  display: block;
  padding: 0 0 5px;
  position: relative;
  text-decoration: none;
}
a::after {
  border-bottom: solid 2px #f00;
  bottom: 0;
  content: "";
  display: block;
  position: absolute;
  right: 0;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  width: 0;
}
a:hover::after {
  width: 100%;
}

今度は右下から開始するので、a要素にposition: relative（相対指定）を設定して、a要素のafter疑似要素を右下に絶対指定（position: absolute;）してあげます。設定の違いはこれだけです。

下線が右から左に引かれるアニメーションの動作確認

動作確認のサンプルは以下のとおりです。マウスオーバーしてみましょう。

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

これが一番やりたかったこと。中央から左右に広がるように下線が引かれるアニメーションをさせます。

ul {
  display: flex;
  list-style: none;
}
li {
  padding: 5px;
}
a {
  display: block;
  padding: 0 0 5px;
  position: relative;
  text-decoration: none;
}
a::before,
a::after {
  border-bottom: solid 2px #f00;
  bottom: 0;
  content: "";
  display: block;
  position: absolute;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  width: 0;
}
a::before {
  left: 50%;
}
a::after {
  right: 50%;
}
a:hover::before,
a:hover::after {
  width: 50%;
}

a要素のafter疑似要素に追加して、before疑似要素を使用します。中央から引かれる下線の左下線をbefore疑似要素で、右下線をafter疑似要素で描画します。

開始位置が中央なので、before/afterそれぞれの座標をbeforeは左から50%、afterは右から50%の位置に設定。width値も100%でなく、それぞれ50%で設定します。

下線が中央から左右に広がるように引かれるアニメーションの動作確認

動作確認のサンプルは以下のとおりです。マウスオーバーしてみましょう。

できた！＼(^o^)／
細かいアニメーションシリーズ色々おぼえておこう。