<div class="buttonHamburger is-type04">
	<div class="buttonHamburger__line">
		<span class="line--top"></span>
		<span class="line--middle"></span>
		<span class="line--bottom"></span>
	<!-- /.buttonHamburger__line --></div>
<!-- /.buttonHamburger --></div>
                

.buttonHamburger {
  width: 3em;
  height: 3em;
  display: block;
  position: absolute;
  top:0;
  right:0;
  //右上に絶対配置
}
.buttonHamburger__line{
  width: 100%;
  height: 100%;
  cursor:pointer;
  display: block;
  background: #000;
  position: relative;
  >span {
    width: 2em;
    height: 1px;
    display: block;
    background: #FFF;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -1em; 
  }
}
.buttonHamburger.is-type04{
  // ハンバーガーメニュー 押す前
  span {
    position: relative;
    transition: all 0.3s;
  }
  .line--top {
    animation: buttonHamburgerType4-top .5s;
    animation-fill-mode: forwards;
  }
  .line--middle {
    transition: .5s opacity;
    transform: translateY(-1px);
    opacity: 1;
  }
  .line--bottom {
    animation: buttonHamburgerType4-bottom .5s;
    animation-fill-mode: forwards;
  }
  // ハンバーガーメニュー 押した後の動き
  &.is-open {
    .line--middle {
      opacity: 0;
      transition: .5s opacity;
    }
    .line--top {
      animation: buttonHamburgerType4-top-close .5s;
      animation-fill-mode: forwards;
    }
    .line--bottom {
      animation:  buttonHamburgerType4-bottom-close .5s;
      animation-fill-mode: forwards;
    }
  }
}
// buttonHamburger.is-type04のアニメーション
@keyframes buttonHamburgerType4-top {
  0% {
    transform: translateY(0px) rotate(-45deg);
  }
  50% {
    transform: translateY(0px) rotate(0deg);
  }
  100% {
    transform: translateY(-0.7em) rotate(0deg);
  }
}
@keyframes buttonHamburgerType4-bottom {
  0% {
    transform: translateY(-1px) rotate(45deg);
  }
  50% {
    transform: translateY(0px) rotate(0deg);
  }
  100% {
    transform: translateY(0.6em) rotate(0deg);
  }
}
@keyframes buttonHamburgerType4-top-close {
  0% {
    transform: translateY(-0.7em) rotate(0deg);
  }
  50% {
    transform: translateY(0px) rotate(0deg);
  }
  100% {
    transform: translateY(0px) rotate(-45deg);
  }
}
@keyframes buttonHamburgerType4-bottom-close {
  0% {
    transform: translateY(0.6em) rotate(0deg);
  }
  50% {
    transform: translateY(0px) rotate(0deg);
  }
  100% {
    transform: translateY(-1px) rotate(45deg);
  }
}
              

※ハンバーガーボタンを押すと「is-open」クラスが「buttonHamburger」クラスの要素に追加されるようJavascriptを記述する必要があります。
ハンバーガーメニューを作成する時は、モーダルウィンドウ等を組み合わせる必要があります。