Edit in JSFiddle

const navBurger = document.getElementById('burger');

function handleClick() {
	if (this.classList.contains('active')) {
  	this.classList.remove('active');
    this.classList.add('inactive');
  } else {
  	this.classList.add('active');
    this.classList.remove('inactive');
  }
}

navBurger.addEventListener('click', handleClick);

<nav>
  <div id="burger"></div>
</nav>

$nav-burger-spacing: 8px;
$nav-burger-weight: 3px;
$nav-burger-color: black;


@keyframes outsideToX{
  0% {
    top: 0;
    bottom: 0;
  }
  25% {
    top: 100%;
    bottom: -$nav-burger-weight;
    transform: rotate(0deg);
    background-color: transparent;
  }
  70% {
    top: 100%;
    bottom: -$nav-burger-weight;
    transform: rotate(15deg);
    background-color: transparent;
  }
  80% {
    top: -$nav-burger-weight * 2;
    bottom: $nav-burger-weight * 2;
  }
  100% {
    top: 0;
    bottom: 0;
    height: 3px;
    margin: auto;
    background-color: $nav-burger-color;
    border: none;
    transform: rotate(45deg);
  }
}

@keyframes insideToX{
  0% {
    top: 0;
    bottom: 0;
  }
  25% {
    top: 100%;
    bottom: -$nav-burger-weight;
    transform: rotate(0deg);
    background-color: transparent;
  }
  70% {
    top: 100%;
    bottom: -$nav-burger-weight;
    transform: rotate(-75deg);
    background-color: transparent;
  }
  80% {
    top: -$nav-burger-weight * 2;
    bottom: $nav-burger-weight * 2;
  }
  100% {
    top: 0;
    bottom: 0;
    border: none;
    transform: rotate(-45deg);
  }
}



nav{
  width: 100%;
  background-color: #eee;
}

#burger{
  overflow: hidden;
  position: relative;
  width: 30px;
  height: ($nav-burger-spacing * 2) + ($nav-burger-weight * 3);
  border: 10px solid transparent;
  
  &:before,
  &:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
  }
  
  &:before {
    border-top: $nav-burger-weight solid $nav-burger-color;
    border-bottom: $nav-burger-weight solid $nav-burger-color;
  }
  
  &:after {
    height: 3px;
    margin: auto;
    background-color: $nav-burger-color;
  }
  
  &:hover {
    cursor: pointer;
  }
  
  &.active {
    &:before {
      animation: outsideToX 0.7s ease-out forwards;
    }
    
    &:after {
      animation: insideToX 0.7s ease-out forwards;
    }
  }
}