My SCSS hamburger menu with transition.

_menu.hamburger.scss

// Hamburger menu SCSS
/*
<a href="#" class="main-menu-btn js-main-menu-toggle">
  <span class="wrapper">
    <span class="bar top"></span>
    <span class="bar middle"></span>
    <span class="bar bottom"></span>
  </span>
</a>
 */
.main-menu-btn {
  display: block;
  width: 32px;
  padding: 10px 0;

  @include breakpoint(600px) {
    display: none;
  }

  .wrapper {
    display: block;
    position: relative;
    width: 32px;
    height: 25px;
  }

  .bar {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 5px;
    transition: transform .1s ease-in-out 0s, top .1s ease-in-out .1s;
    // background-color: $navy;
    background-color: #FFF;
    transform-origin: 50% 50% 0;

    &.middle {
      top: 10px;
    }

    &.bottom {
      top: 20px;
    }
  }

  &.is-active {
    .bar {
      top: 10px;
      width: 32px;

      &.top {
        transform: rotate(45deg);
      }

      &.middle {
        opacity: 0;
      }

      &.bottom {
        transform: rotate(-45deg);
      }
    }
  }
}