hoverした時に中心からアンダーラインを出すcssアニメーション

hoverした時に要素の中心からラインを出す方法

今回はナビゲーションメニューで使える、cssテクニックを紹介するぞ。

ちなみに下が完成形だ。今回はHTMLとCSSだけで実装するぞ！

See the Pen
hoverした時に中央からラインが表示される by 魔王 (@maou_frontend)
on CodePen.

HTML構造とCSS構造について

まずはHTML構造とCSS構造について書いていく。とはいえ、HTMLに関してはかなり簡単だ。

HTMLの構造

HTMLは今回普通のリストを用意した。現在表示されている場合はクラスに「navi-now」をつけている。

<ul class="navi-box">
  <li class="navi-box__list navi-now">
    <a class ="navi-box__link" href="#">トップ</a>
  </li>
  <li class="navi-box__list">
    <a class ="navi-box__link" href="#">魔王軍について</a>
  </li>
  <li class="navi-box__list">
    <a class ="navi-box__link" href="#">魔王軍の強み</a>
  </li>
  <li class="navi-box__list">
    <a class ="navi-box__link" href="#">お問い合わせ</a>
  </li>
  <li class="navi-box__list">
    <a class ="navi-box__link" href="#">採用情報</a>
  </li>
</ul>

CSSの構造

今回の中心はCSSなのだが、特にポイントとなる部分はafterで疑似要素を用意することと、その疑似要素に対しての動きを指定する部分であろうな。

下のコードだと、13~29行目と30~36行目の部分になるぞ。

ちなみにここのサイトではcssはscssで実装しているから、cssで使用したい場合はcodepenのcssタブの右にある下矢印ボタンから「view compiled css」を選択するがよい。

.navi-box {
  display:flex;
   &__list{
    font-size: 14px;
    text-align: center;
    list-style:none;
  }
  &__link{
    text-decoration: none;
    padding: 10px 15px;
    color: #000;
    position: relative;
    &:after{
      content: "";
      position: absolute;
      background: #000;
      left: 0;
      bottom: 0;
      right: 0;
      margin: 0 auto;
      width: 50%;
      height: 2px;
      -webkit-transform: scaleX(0);
      -ms-transform: scaleX(0);
      transform: scaleX(0);
      -webkit-transition: all .5s ease;
      -moz-transition: all .5s ease;
      transition: all .5s ease;
    }
    &:hover{
      &:after{
        -webkit-transform: scaleX(1);
        -ms-transform: scaleX(1);
        transform: scaleX(1);
      }
    }
  }
}

.navi-now a:after {
      -webkit-transform: scaleX(1);
      -ms-transform: scaleX(1);
      transform: scaleX(1);
    }
  

CSSアニメーションの設定内容

疑似要素にtransform: scaleX();を指定する

疑似要素で今回のアンダーラインの部分を実装していく。

今回表示させるのに使う要素はtransform: scaleX();である。

このtransform: scaleX();関数は、指定した要素をX軸（水平方向）に拡縮するものだ。

今回はhoverした時に表示されるようにするので、最初の状態ではtransform: scaleX(0);でゼロ地点を指定しているのである。

そうすることで、display:noneやvisibility:hiddenを使わずに非表示の状態にすることが可能だ。

&:after{
//contentには何も入れない
      content: "";
//親要素のpositionをrelativeに指定することを忘れるでないぞ
      position: absolute;
      background: #000;
      left: 0;
      bottom: 0;
      right: 0;
      margin: 0 auto;
//表示されたときのラインの長さを指定する。
      width: 50%;
//表示されたときのラインの太さを指定する。
      height: 2px;
//初期状態はゼロ地点を指定する
      -webkit-transform: scaleX(0);
      -ms-transform: scaleX(0);
      transform: scaleX(0);
//変化に要する時間を指定する
      -webkit-transition: all .5s ease;
      -moz-transition: all .5s ease;
      transition: all .5s ease;
    }

要素にhoverした際の動きを指定する

疑似要素で設定したライン要素をhoverした際に動かすには 、transform: scaleX(0);を(1)に変更してやればいい。

そうすることで、hoverした際に水平方向へゼロ地点から1地点へ拡大するのだ。

&:hover{
      &:after{
        -webkit-transform: scaleX(1);
        -ms-transform: scaleX(1);
        transform: scaleX(1);
      }
    }

まとめ

以上がhoverした際に、要素の中心からアンダーラインを表示させるテクニックである。

ポイントになる点は
・疑似要素でラインを作成する。
・transform: scaleX()でラインを変形させる。

この２つであろう。

色やサイズ、変形する大きさやスピードも変更できるので、自分のサイトに合うように変更すればよいだろう！