ハンバーガーメニューの開く／閉じるとアイコンの変化アニメーション

≡　→　×　に形が変わるメニューボタン

<button type="button" id="drawer_btn">
     <span class="line"></span>
     <span class="line"></span>
     <span class="line"></span>
</button>

button#drawer_btn {
  position: fixed;
  top: 10px;
  display: block;
  width: 44px;
  height: 44px;
  cursor: pointer;
  z-index: 100;
  background: #000;
  border: solid 2px #fff;

  .line{
    position: absolute;
    display: block;
    height: 3px;
    width: 70%;
    left: 15%;
    background: #fff;
    transition: .3s;
    &:nth-child(1){
      top: 23%;
    }
    &:nth-child(2){
      top: 48%;
      opacity: 1;
    }
    &:nth-child(3){
      top: 72%;
    }
  }

  &.open{
    .line{
      transition: .2s;
      &:nth-child(1){
        top: 48%;
        transform: rotate(45deg);
      }
      &:nth-child(2){
        display: none;
        opacity: 0;
      }
      &:nth-child(3){
        top: 48%;
        transform: rotate(-45deg);
      }
    }
  }
}

$('#drawer_btn').click(function () {
    $(this).toggleClass('open');
    $('#drawer_nav').slideToggle();
});