Гамбургер значок анимации

Question

Я работаю над анимацией иконки гамбургера. Текущее состояние значка бургера само по себе является результатом того, чего я пытаюсь достичь. Но есть кое-что странное, что я пытаюсь исправить.

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

Эти три пролета - это три строки бургера Каждая строка имеет ширину 200% и цвет фона 50% красного и 50% черного слева. Чтобы создать анимацию, сначала я показываю черную часть, давая отрицательное поле и при наведении курсора , показывая красную часть. И для hover out, здесь для каждой строки я также устанавливаю задержку перехода , чтобы не позволять , эти строки возвращаются в свое собственное состояние так быстро, потому что другие линии идут слева, что создает анимацию по мере необходимости.

И

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

Эти три пролета - это те же три строки бургера. На самом деле, это те линии, которые мы видим на иконке бургера, пока не зависает . Но при наведении курсора на эти линии go влево (скрыто) и появляется задержка анимации при зависании.

Я пытаюсь исправить это, когда я парю, если я делаю это несколько раз раз и с небольшим разрывом в продолжительности, выглядит плохо. Есть ли идея, чтобы исправить эту проблему? Спасибо.

Вот скрипка

.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>