汉堡图标动画

Question

我正在制作汉堡图标动画。汉堡图标的当前状态本身就是我要实现的结果。但是，我要修复一个奇怪的事情。

<span  class="burger__icon-lines">
    <span></span>
    <span></span>
    <span></span>
</span>

这个三段式是汉堡的三行。每行的宽度为200%，背景颜色从左开始为50％红色和50％黑色。为了创建动画，最初，我通过给负边距和悬停显示红色部分来显示黑色部分。对于悬停，在这里我还为每行设置了过渡延迟，不允许如此快地返回到自己的状态，因为其他行是从左边来的根据需要创建动画。

和

<span class="burger__icon-lines-copy"> 
    <span></span> 
    <span></span>
    <span></span> 
 </span>

这三个跨度与汉堡的三行相同。 实际上，这些是我们在汉堡图标中看到的行，未悬停。但是，当悬停时，这些行会移到左侧的（隐藏）处，并在悬停时带有动画延迟。

我要修复的是悬停几次但间隔不大的情况，这看起来很糟糕。 有解决这个问题的主意吗？谢谢。

这是小提琴

.burger {
  display: flex;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin-right: -16px;
  background: transparent;
  border: 1px solid #ddd;
}

.burger .burger__icon {
  width: 24px;
  height: 20px;
  overflow: hidden;
  display: block;
}

.burger__icon-lines, .burger__icon-lines-copy {
  display: block;
}

.burger__icon-lines span,
.burger__icon-lines-copy span {
  height: 2px;
  display: block;
  margin-top: 7px;
  width: 100%;
}

.burger__icon-lines span:first-child,
.burger__icon-lines-copy span:first-child {
  margin-top: 0;
}

.burger__icon-lines span {
  width: 200%;
  margin-left: -100%;
  transition: 0.3s;
  background: linear-gradient(to right, #fc3e1d 0%, #fc3e1d 50%, #222 50%, #222 100%);
}

.burger__icon-lines span:nth-child(1) {
  transition-delay: 0.3s;
}

.burger__icon-lines span:nth-child(2) {
  transition-delay: 0.4s;
}

.burger__icon-lines span:nth-child(3) {
  transition-delay: 0.5s;
}

.burger__icon-lines-copy {
  margin-top: -19.5px;
}

.burger__icon-lines-copy span {
  transition: 0.3s;
  background: #222;
}

.burger__icon-lines-copy span:nth-child(1) {
  transition-delay: 0.1s;
}

.burger__icon-lines-copy span:nth-child(2) {
  transition-delay: 0.2s;
}

.burger__icon-lines-copy span:nth-child(3) {
  transition-delay: 0.3s;
}

.burger:hover .burger__icon-lines span {
  margin-left: 0%;
}

.burger:hover .burger__icon-lines span:nth-child(1) {
  transition-delay: 0.1s;
}

.burger:hover .burger__icon-lines span:nth-child(2) {
  transition-delay: 0.2s;
}

.burger:hover .burger__icon-lines span:nth-child(3) {
  transition-delay: 0.3s;
}

.burger:hover .burger__icon-lines-copy span {
  margin-left: -24px;
  transition: none;
}

<button class="burger">
          <span class="burger__icon">
            <span class="burger__icon-lines">
              <span></span>
              <span></span>
              <span></span>
            </span>
            <span class="burger__icon-lines-copy">
              <span></span>
              <span></span>
              <span></span>
            </span>
          </span>
        </button>