汉堡包图标动画

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>
这三个跨度是汉堡的相同三行。 实际上，这些是我们在汉堡图标中看到的行]，而未悬停

。但是，当悬停时，这些行向左（（hidden））并在悬停时带有动画延迟。

[我要解决的问题是，如果我进行了几次悬停并且持续时间没有太多间隔，它看起来很糟糕。有解决这个问题的主意吗？谢谢。

这里是小提琴

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

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

Answer 1

嗯，如果我理解正确，您只需删除burger__icon-lines-copy跨度。它的目的是什么，当您无论如何都没有悬停时只看到行的前100％黑色部分时。]