Hamburger menu animation

Question

I am working on a custom hamburger menu animation where the hamburger menu transforms into two shapes when clicked: a triangle facing right, and a chevron to the right of it.

I'm still having some issues with smoothening out the animation though; I'm using border-color to accomplish what I want, but when double-clicking (= the 'reverse' animation) isn't as smooth as the starting animation.

I'm working on a Codepen so you can check out the code here: Codepen example

The HTML is pretty basic:

<div class="button">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
</div>

(S)CSS:

body {
  background-color: #252626;
}
div {
  width: 200px;
  margin: 100px;
  div {
    height: 50px;
    margin: 30px 0;
    position: relative;
    top: 0;
    left: 0;
    bottom: 0;
    transition: all .3s ease-in-out;
  }
}
.one, .three {
  background-color: #DFBA68;
  height: 12px;
}

.one-clicked, .three-clicked {
  position: relative;
  left: 50px;
  border-radius: 12px;
}

.one-clicked {
  transform: rotate(33deg) scale(.93, 1);
  top: 90px;
}

.two {
  width: 0;
  height: 0;
    border-top: 25px solid #F7F4EA;
    border-left: 200px solid #F7F4EA;
    border-bottom: 25px solid #F7F4EA;
  transition: all .3s ease-in-out, border-color .1ms ease-in-out .2s;
}

.two-clicked{
  width: 0;
    height: 0;
    border-top: 100px solid transparent;
    border-left: 150px solid #F7F4EA;
    border-bottom: 100px solid transparent;
  transition: all .3s ease-in-out, border-color .1ms ease-in-out;
}

.three-clicked{
  transform: rotate(-33deg) scale(.93, 1);
  top: -87px;
}

Can anyone here help me smoothen out this complete animation for me?

Answer 1

I had some fun with the burger menu icon animation. I totaly refactored it with svg and used the snap.svg library for the animation. This is a gif of the output :

codepen demo for the animated burger icon

Note that the bounce easing function can be changed to easein or other to change the animation

and the full code here :

var s           = Snap().attr({viewBox:'0 0 100 100'}),
    mid         = s.path("M0 40L100 40L100 60L0 60").attr({fill:"#F7F4EA"}),
    ext         = s.path('M0 20L100 20M100 80L0 80').attr({strokeWidth: 4,stroke:"#DFBA68"}),
    clicked     = 0;

s.click(function(){
  if (clicked == 0){
    mid.animate({d:"M0 5L55 50L55 50L0 95"},700,mina.bounce);
    ext.animate({d:"M40 5L90 51.15M90 48.85L40 95"},700,mina.bounce);
    clicked=1;
  }  
  else {
    mid.animate({d:"M0 40L100 40L100 60L0 60"},700,mina.bounce);
    ext.animate({d:"M0 20L100 20M100 80L0 80"},700,mina.bounce);
    clicked=0;
  }
});

html{height:100%;}
body{min-height:100%; background-color:#252626;text-align:center;}
svg{width:20%;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg.js"></script>