Css 汉堡菜单动画

我正在制作一个自定义的汉堡包菜单动画，单击该动画时，汉堡包菜单将转换为两个形状：一个面向右侧的三角形和一个位于其右侧的V形

不过，我在平滑动画方面仍然有一些问题；我正在使用边框颜色来实现我想要的效果，但双击（=反转动画）时，效果不如开始动画平滑

我正在使用代码笔，因此您可以在此处查看代码：

HTML非常基本：

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

---

这里有人能帮我把这个完整的动画弄平滑吗

我在汉堡菜单图标动画中玩得很开心。我用svg对其进行了全面重构，并将库用于动画。这是输出的gif：

用于

请注意，反弹缓和功能可以更改为easein或其他以更改动画

完整代码如下：

var s=Snap（），
mid=s.path（“M0 40L100 40L100 60L0 60”）.attr（{fill:#F7F4EA}），
ext=s.path（'M0 20L100 20M100 80L0 80'）.attr（{strokeWidth:4，stroke:#DFBA68}），
单击=0；
s、 单击（函数（）{
如果（单击==0）{
mid.animate（{d:“m05l5550l0550l095”}，700，mina.bounce）；
外部动画（{d:“M40 5L90 51.15M90 48.85L40 95”}，700，mina.bounce）；
单击=1；
}  
否则{
mid.animate（{d:“m040l10040l10060l060”}，700，mina.bounce）；
外部动画（{d:“M0 20L100 20M100 80L0 80”}，700，mina.bounce）；
单击=0；
}
});
html{height:100%；}
正文{最小高度：100%；背景色：#252626；文本对齐：居中；}
svg{宽度：20%；}
对你来说没问题，我想这和我的很相似；三角形和正方形之间的最后一个过渡是困扰我的。不像我希望的那么简单，但这几乎就是我心目中的动画。非常感谢！
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;
}