AUTOVICE

TECH BLOG

【CSS】カーソルを乗せると流れるようなアニメーションのハンバーガーメニューを作る

2020-08-31

はじめに

今回はハンバーガーメニューにカーソルを乗せると川のように流れるアニメーションを作りたいと思います。

今回の記事は以下の記事をベースにしていますので、まだご覧になっていない方は先にこちらをご覧ください。

サンプル

解説

HTML

HTMLは前回から変更がないので省略します。

CSS

前回の記事から変更のある箇所について解説します。

.hamburger {
  div {
    background-color: transparent;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #000;
      transform-origin: right center;
      will-change: transform;
    }
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #000;
      transform: scaleX(0);
      transform-origin: left center;
      will-change: transform;
    }
  }
}

まず、3本線となるdiv自体の背景色を透明にします。そしてdivと同じ大きさの::before::afterをそれぞれ作り、::afterのみX方向に縮小しておきます。

図にすると以下のような感じです。図ではわかりやすいように&::afterを縮小していませんが、実際は縮小させて見えなくなっている状態と思ってください。

.hamburger {
  &:hover div {
    &::before { transform: scaleX(0); }
    &:nth-of-type(1)::before { transition: transform .5s 0s; }
    &:nth-of-type(2)::before { transition: transform .5s .1s; }
    &:nth-of-type(3)::before { transition: transform .5s .2s; }

    &::after { transform: scaleX(1); }
    &:nth-of-type(1)::after { transition: transform .5s .3s; }
    &:nth-of-type(2)::after { transition: transform .5s .4s; }
    &:nth-of-type(3)::after { transition: transform .5s .5s; }
  }
}

ハンバーガーメニューにカーソルを乗せたときのスタイルです。カーソルを乗せると::beforeはX方向に縮小し、反対に::afterは拡大します。

このとき、::before::afterそれぞれの3本線にtransition-delaytransitionの3つ目の値)をつけてアニメーションが始まるのをずらすことで、川の流れのような動きにすることができます。

また、transition:hoverに設定することで、transitionの効果を一方向(ゆっくり変化し即座に戻る)にしています。transitionを親要素に設定してしまうと、カーソルが乗ったときだけではなく、カーソルが離れたときにも動いてしまいます。

図にすると以下のような感じです。

#toggle-nav {
  &:checked {
      div {
        &::before,
        &::after {
          background-color: #fff;
        }
      }
    }
  }
}

フルスクリーンナビゲーションを表示させたときは、divではなく::before::afterの背景色を変更します。

フルスクリーンナビゲーションを表示しているときのバッテンにカーソルを乗せると、ちょっと変わったアニメーションをして面白いです。

まとめ

transformtransitionを使えばいろいろな動きをつけられて楽しいですね。これらに加えてanimation@keyframesを組み合わせることで、さらに複雑な動きをさせることができます。