Webサイトアニメーション：ハンバーガーメニューのサンプル集

よくWebサイトの右上にある「三」マーク。ハンバーガーメニューと呼ばれています。

当ページではハンバーガーメニューのアニメーションを色を変えて多彩なパターンで並べています。

デザインの参考にしてください。

ばく

未経験、異業種からWeb制作の副業を経てフリーランスに。
学習ノウハウ、役に立った情報を初心者に寄り添った目線で発信します。

1 1,シンプルな×
2 2,くるっと一回転
3 3,左軸で回転する
4 4,右軸で回転する
5 5,真ん中の棒が飛んでいく
6 6,ワンテンポ遅れて配置
7 二段階アニメーション
8 +から回転

1,シンプルな×

様々なサイトで使われています。

背景色やバーの色、動くスピードでイメージが変わります。

HTML

   <button
      id="simple"
      type="button"
      class="hamburger anim-simple theme-gray"
      aria-label="Simple gray"
    >
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="bar"></span>
    </button>

CSS


.hamburger {
  --hamburger-bg: #e0e0e0;
  --hamburger-bar: #111;
  --hamburger-border: transparent;
  position: relative;
  width: 56px;
  height: 44px;
  border: 1px solid var(--hamburger-border);
  /* border-radius: 10px; */
  background-color: var(--hamburger-bg);
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.bar {
  position: absolute;
  width: 40px;
  height: 3px;
  border-radius: 5px;
  background-color: var(--hamburger-bar);
  left: 8px;
  transition: all 0.3s ease-in-out;
}

.bar {
  left: 50%;
  transform: translate(-50%, -50%);
}

.bar:first-of-type {
  top: 50%;
  transform: translate(-50%, calc(-50% - 8px));
}

.bar:nth-of-type(2) {
  top: 50%;
  transform: translate(-50%, -50%);
}

.bar:nth-of-type(3) {
  top: 50%;
  transform: translate(-50%, calc(-50% + 8px));
}


/* theme variations */
.theme-gray {
  --hamburger-bg: #e0e0e0;
  --hamburger-bar: #111;
}


.anim-simple.is-action .bar:first-of-type {
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.anim-simple.is-action .bar:nth-of-type(2) {
  opacity: 0;
}

.anim-simple.is-action .bar:nth-of-type(3) {
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

javascript

  const simple = document.getElementById('simple');
  simple.addEventListener('click', () => {
    simple.classList.toggle('is-action');
});

2,くるっと一回転

素早く一回転して×を作ります。

HTML

    <button
      id="rotation"
      type="button"
      class="hamburger anim-rotation theme-gray"
      aria-label="rotation gray"
    >
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="bar"></span>
    </button>

CSS


.hamburger {
  --hamburger-bg: #e0e0e0;
  --hamburger-bar: #111;
  --hamburger-border: transparent;
  position: relative;
  width: 56px;
  height: 44px;
  border: 1px solid var(--hamburger-border);
  /* border-radius: 10px; */
  background-color: var(--hamburger-bg);
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.bar {
  position: absolute;
  width: 40px;
  height: 3px;
  border-radius: 5px;
  background-color: var(--hamburger-bar);
  left: 8px;
  transition: all 0.3s ease-in-out;
}

.bar {
  left: 50%;
  transform: translate(-50%, -50%);
}

.bar:first-of-type {
  top: 50%;
  transform: translate(-50%, calc(-50% - 8px));
}

.bar:nth-of-type(2) {
  top: 50%;
  transform: translate(-50%, -50%);
}

.bar:nth-of-type(3) {
  top: 50%;
  transform: translate(-50%, calc(-50% + 8px));
}


/* theme variations */
.theme-gray {
  --hamburger-bg: #e0e0e0;
  --hamburger-bar: #111;
}


.anim-rotation.is-action .bar:first-of-type {
  top: 50%;
  transform: translate(-50%, -50%) rotate(315deg);
}

.anim-rotation.is-action .bar:nth-of-type(2) {
  opacity: 0;
}

.anim-rotation.is-action .bar:nth-of-type(3) {
  top: 50%;
  transform: translate(-50%, -50%) rotate(-315deg);
}

javascript

 const rotation = document.getElementById("rotation");
    rotation.addEventListener("click", () => {
      rotation.classList.toggle("is-action");
    });

3,左軸で回転する

スタイリッシュに演出したいときに良さそうですね。

HTML

 <button
      id="pivot"
      type="button"
      class="hamburger anim-pivot theme-gray"
      aria-label="pivot gray"
    >
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="bar"></span>
    </button>

CSS


.hamburger {
  --hamburger-bg: #e0e0e0;
  --hamburger-bar: #111;
  --hamburger-border: transparent;
  position: relative;
  width: 56px;
  height: 44px;
  border: 1px solid var(--hamburger-border);
  /* border-radius: 10px; */
  background-color: var(--hamburger-bg);
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.bar {
  position: absolute;
  width: 40px;
  height: 3px;
  border-radius: 5px;
  background-color: var(--hamburger-bar);
  left: 8px;
  transition: all 0.3s ease-in-out;
}

.bar {
  left: 50%;
  transform: translate(-50%, -50%);
}

.bar:first-of-type {
  top: 50%;
  transform: translate(-50%, calc(-50% - 8px));
}

.bar:nth-of-type(2) {
  top: 50%;
  transform: translate(-50%, -50%);
}

.bar:nth-of-type(3) {
  top: 50%;
  transform: translate(-50%, calc(-50% + 8px));
}


/* theme variations */
.theme-gray {
  --hamburger-bg: #e0e0e0;
  --hamburger-bar: #111;
}

.anim-pivot .bar {
  transition: all 0.3s ease-in-out;
}

.anim-pivot.is-action .bar:nth-child(1) {
  transform: translate(-50%, -50%) rotate(135deg);
  top: 50%;
  transform-origin: center;
}

.anim-pivot.is-action .bar:nth-child(2) {
  width: 0;
}

.anim-pivot.is-action .bar:nth-child(3) {
  transform: translate(-50%, -50%) rotate(45deg);
  top: 50%;
  transform-origin: center;
}

javascript

  const pivot = document.getElementById("pivot");
    pivot.addEventListener("click", () => {
      pivot.classList.toggle("is-action");
    });

4,右軸で回転する

左軸の反対の動きをします。

こちらもスタイリッシュな動きをします。

HTML

<button
      id="morph"
      type="button"
      class="hamburger anim-morph theme-gray"
      aria-label="morph gray"
    >
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="bar"></span>
    </button>

CSS


.hamburger {
  --hamburger-bg: #e0e0e0;
  --hamburger-bar: #111;
  --hamburger-border: transparent;
  position: relative;
  width: 56px;
  height: 44px;
  border: 1px solid var(--hamburger-border);
  /* border-radius: 10px; */
  background-color: var(--hamburger-bg);
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.bar {
  position: absolute;
  width: 40px;
  height: 3px;
  border-radius: 5px;
  background-color: var(--hamburger-bar);
  left: 8px;
  transition: all 0.3s ease-in-out;
}

.bar {
  left: 50%;
  transform: translate(-50%, -50%);
}

.bar:first-of-type {
  top: 50%;
  transform: translate(-50%, calc(-50% - 8px));
}

.bar:nth-of-type(2) {
  top: 50%;
  transform: translate(-50%, -50%);
}

.bar:nth-of-type(3) {
  top: 50%;
  transform: translate(-50%, calc(-50% + 8px));
}


/* theme variations */
.theme-gray {
  --hamburger-bg: #e0e0e0;
  --hamburger-bar: #111;
}

.anim-pivot .bar {
  transition: all 0.3s ease-in-out;
}

.anim-pivot.is-action .bar:nth-child(1) {
  transform: translate(-50%, -50%) rotate(135deg);
  top: 50%;
  transform-origin: center;
}

.anim-pivot.is-action .bar:nth-child(2) {
  width: 0;
}

.anim-pivot.is-action .bar:nth-child(3) {
  transform: translate(-50%, -50%) rotate(45deg);
  top: 50%;
  transform-origin: center;
}

javascript

 const morph = document.getElementById("morph");
    morph.addEventListener("click", () => {
      morph.classList.toggle("is-action");
    });

5,真ん中の棒が飛んでいく

スッと棒が飛んでいきます。

HTML

 <button
      id="burst"
      type="button"
      class="hamburger anim-burst theme-gray"
      aria-label="burst gray"
    >
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="bar"></span>
    </button>

CSS


.hamburger {
  --hamburger-bg: #e0e0e0;
  --hamburger-bar: #111;
  --hamburger-border: transparent;
  position: relative;
  width: 56px;
  height: 44px;
  border: 1px solid var(--hamburger-border);
  /* border-radius: 10px; */
  background-color: var(--hamburger-bg);
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.bar {
  position: absolute;
  width: 40px;
  height: 3px;
  border-radius: 5px;
  background-color: var(--hamburger-bar);
  left: 8px;
  transition: all 0.3s ease-in-out;
}

.bar {
  left: 50%;
  transform: translate(-50%, -50%);
}

.bar:first-of-type {
  top: 50%;
  transform: translate(-50%, calc(-50% - 8px));
}

.bar:nth-of-type(2) {
  top: 50%;
  transform: translate(-50%, -50%);
}

.bar:nth-of-type(3) {
  top: 50%;
  transform: translate(-50%, calc(-50% + 8px));
}


/* theme variations */
.theme-gray {
  --hamburger-bg: #e0e0e0;
  --hamburger-bar: #111;
}


.anim-burst.is-action .bar:nth-child(1) {
  transform: translate(-50%, -50%) rotate(45deg);
  top: 50%;
}

.anim-burst.is-action .bar:nth-child(2) {
  opacity: 0;
  transform: translate(100%);
}

.anim-burst.is-action .bar:nth-child(3) {
  transform: translate(-50%, -50%) rotate(-45deg);
  top: 50%;
}

javascript

  const burst = document.getElementById("burst");
    burst.addEventListener("click", () => {
      burst.classList.toggle("is-action");
    });

6,ワンテンポ遅れて配置

時間差で動きます。

ワンテンポあると少し印象に残りますね。

HTML

  <button id="flip" type="button" class="hamburger anim-flip theme-gray" aria-label="Flip">
      <span class="line"></span>
      <span class="line"></span>
    </button>

CSS


.hamburger {
  --hamburger-bg: #e0e0e0;
  --hamburger-bar: #111;
  --hamburger-border: transparent;
  position: relative;
  width: 56px;
  height: 44px;
  border: 1px solid var(--hamburger-border);
  background-color: var(--hamburger-bg);
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.line {
  position: absolute;
  width: 40px;
  height: 3px;
  border-radius: 5px;
  background-color: var(--hamburger-bar);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease-in-out;
}

.line:first-of-type {
  transform: translate(-50%, calc(-50% - 6px));
}

.line:nth-of-type(2) {
  transform: translate(-50%, calc(-50% + 6px));
}

.theme-gray {
  --hamburger-bg: #e0e0e0;
  --hamburger-bar: #111;
}


.anim-flip.is-action .line:nth-child(1) {
  transform: translate(-50%, -50%) rotate( -135deg);
transition: top .22s cubic-bezier(.33333, 0, .66667, .33333) .2s,
  transform .28s cubic-bezier(.215, .61, .355, 1) .2s;
}

.anim-flip.is-action .line:nth-child(2) {
  transform: translate(-50%, -50%) rotate(-45deg);
}

javascript

 const flip = document.getElementById("flip");
    flip.addEventListener("click", () => {
      flip.classList.toggle("is-action");
    });

二段階アニメーション

一度真ん中に集まり、×に変化します。

HTML

 <button id="slide" type="button" class="hamburger anim-slide theme-gray" aria-label="Flip gray">
      <span class="slide-line"></span>
      <span class="slide-line"></span>
    </button>

CSS


.hamburger {
  --hamburger-bg: #e0e0e0;
  --hamburger-bar: #111;
  --hamburger-border: transparent;
  position: relative;
  width: 56px;
  height: 44px;
  border: 1px solid var(--hamburger-border);
  /* border-radius: 10px; */
  background-color: var(--hamburger-bg);
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.slide-line {
  position: absolute;
  top: 0;
  left: 13%;
  width: 40px;
  height: 3px;
      flex-shrink: 0;
  border-radius: 6px;
  background-color:  var(--hamburger-bar);
  transition: top 0.3s ease, transform 0.3s ease;
  transition-property: transform, top;
          transition-duration: 0.3s;
}

.slide-line:nth-of-type(1) {
  top: 30%;
          transition-delay: 0s, 0.3s;
}


.slide-line:nth-of-type(2) {
  top: 65%;
  transition-delay: 0s, 0.3s;
}

.is-action .slide-line:nth-of-type(1) {
  top: 50%;
  transform: translateY(-50%) rotate(-30deg);
  transition-delay: 0.3s, 0s;
}

.is-action .slide-line:nth-of-type(2) {
  top: 50%;
  transform: translateY(-50%) rotate(30deg);
  transition-delay: 0.3s, 0s;
}

javascript

   const slide = document.getElementById("slide");
    slide.addEventListener("click", () => {
      slide.classList.toggle("is-action");
    });

+から回転

＋マークが出てから回転します。

HTML

 <button
      id="twist"
      type="button"
      class="hamburger anim-twist theme-gray"
      aria-label="+から回転 gray"
    >
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="v-bar"></span>
      <span class="v-bar"></span>
    </button>

CSS

.hamburger {
  --hamburger-bg: #e0e0e0;
  --hamburger-bar: #111;
  --hamburger-border: transparent;
  position: relative;
  width: 56px;
  height: 44px;
  border: 1px solid var(--hamburger-border);
  /* border-radius: 10px; */
  background-color: var(--hamburger-bg);
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.bar {
  position: absolute;
  width: 40px;
  height: 3px;
  border-radius: 5px;
  background-color: var(--hamburger-bar);
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease-in-out;
}

.bar:first-of-type {
  top: 50%;
  transform: translate(-50%, calc(-50% - 8px));
}

.bar:nth-of-type(2) {
  top: 50%;
}

.bar:nth-of-type(3) {
  top: 50%;
  transform: translate(-50%, calc(-50% + 8px));
}

.anim-twist .bar {
  transition-delay: 0.6s;
}

.anim-twist .bar:nth-of-type(2) {
  transition-delay: 0.5s;
}

.anim-twist.is-action .bar:nth-of-type(1) {
  top: 0;
  opacity: 0;
  transition: top .5s ease, opacity .5s ease;
}

.anim-twist.is-action .bar:nth-of-type(2) {
  opacity: 0;
  transition-delay: 0s;
}

.anim-twist.is-action .bar:nth-of-type(3) {
  top: 100%;
  opacity: 0;
  transition: top 0.5s ease, opacity 0.5s ease;
}

.anim-twist .v-bar {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  border-radius: 5px;
  background-color: var(--hamburger-bar);
}

.anim-twist .v-bar:nth-of-type(4) {
  opacity: 0;
  height: 40px;
  width: 3px;
  transition: opacity .3s ease, transform 0.3s ease;
  transition-delay: 0.3s, .3s;  /* 先に表示 → 後から回転 */
}

.anim-twist.is-action .v-bar:nth-of-type(4) {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(45deg);
  transition-delay: 0s, 0.3s; 
}

.anim-twist .v-bar:nth-of-type(5) {
  height: 3px;
  max-width: 40px;
  width: 0%;
  transform-origin: center;
  transition: width .3s ease, transform 0.3s ease;
  transition-delay: 1s, .3s;  /* 先に表示 → 後から回転 */
}

.anim-twist.is-action .v-bar:nth-of-type(5) {
  max-width: 40px;
  width: 100%;
  transform: translate(-50%, -50%) rotate(45deg);
  transition-delay: 0s, .3s; 
}

javascript

     const twist = document.getElementById("twist");
      twist.addEventListener("click", () => {
        twist.classList.toggle("is-action");
      });

順次追加予定です。

実装方法も合わせて更新していきます。