Edit in JSFiddle

.menu-bar{
  position: absolute;
  top:30px;
  left:30px;
  z-index:20;
}

.menu-bar a{
  display:block;
}

.menu-bar span{
  display:block;
  width:22px;
  height:1px;
  margin-bottom:7px;
  background: #7d7d7d;
  transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
}

.menu-bar.after .bar-1{
  transform: translate(0, 8px) rotate(45deg);
  -webkit-transform: translate(0,8px) rotate(45deg);
  -ms-transform: translate(0,8px) rotate(45deg);
}

.menu-bar.after .bar-2{
  visibility: hidden;
}

.menu-bar.after .bar-3{
  transform: translate(0, -8px) rotate(-45deg);
}