CSS 鼠标悬停动画闪烁/循环

Question

我有一个关于动画的问题。

我的动画闪烁不止，我想要停止这个触发循环。当我悬停在 before 和 after 上时，它就像循环播放我的动画。我尝试了一些小方法，但是没有头绪...

也许我应该尝试使用 span（替换 before）并设置为绝对定位？

这里是代码片段：https://codepen.io/chrishanZ/pen/eYgoLBG

谢谢你的帮助。

.header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  background-color: blue;
  z-index: 4;
}
.header_buttonburger {
  position: absolute;
  color: black;
  text-transform: uppercase;
  font-size: 1.125em;
  right: 19px;
  top: 24px;
  z-index: 3;
}
.header_buttonburger:before, .header_buttonburger:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background-color: black;
  transition: top 0.15s ease;
  pointer-events: auto;
}
.header_buttonburger:before {
  top: calc(100% + 2px);
}
.header_buttonburger:after {
  top: calc(100% + 8px);
}
.header_buttonburger:hover:before {
  top: calc(100% + 4px);
}
.header_buttonburger:hover:after {
  top: calc(100% + 12px);
}

<header class="header">
  <button class="header_buttonburger">
      Menu
   </button>
  
</header>

如果有人能帮我，谢谢！ :)

非常感谢

- DUTTOO Chris

---

您的样例没有任何反应吗？ - vanowm

非常抱歉，这是CodePen链接：https://codepen.io/chrishanZ/pen/eYgoLBG - DUTTOO Chris

什么是循环？我没有看到任何闪烁或悬停效果的问题。 - Rolv Apneseth

@RolvApneseth 试着把你的光标放在“菜单”下面的两条线的中间。 - DUTTOO Chris

@DUTTOOChris 我明白你的意思。当你将光标悬停在底部线的上方时，这些线会上下移动。 - GucciBananaKing99

@GucciBananaKing99 有任何解决方案的想法吗？ - DUTTOO Chris

Answer 1

需要创建一个容器来包含按钮，并在容器上悬停，如下所示：
你需要创建一个容器来包含按钮并悬停在容器上，如下所示：

     <div class="container_header_buttonburger">
        <button class="header_buttonburger">
            Menu
        </button>
     </div>

以及样式方面的内容

     .header_buttonburger {
         position: relative;
         color: black;
         text-transform: uppercase;
         font-size: 1.125em;
         z-index: 3;
         display: block;
      }
          .container_header_buttonburger {
            position: absolute;
            right: 19px;
            top: 24px;
            padding-bottom:14px; /* <--that makes the difference */
          }
          .container_header_buttonburger:hover > .header_buttonburger:before {
            top: calc(100% + 4px);
          }
          .container_header_buttonburger:hover > .header_buttonburger:after {
            top: calc(100% + 12px);
          }

所以所有的样式:

              .header {
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            background-color: blue;
            z-index: 4;
          }
          .header_buttonburger {
            position: relative;
            color: black;
            text-transform: uppercase;
            font-size: 1.125em;
            z-index: 3;
            display: block;
          }
          .header_buttonburger:before, .header_buttonburger:after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            height: 2px;
            background-color: black;
            transition: top 0.15s ease;
            pointer-events: auto;
          }
          .header_buttonburger:before {
            top: calc(100% + 2px);
          }
          .header_buttonburger:after {
            top: calc(100% + 8px);
          }
          .container_header_buttonburger {
            position: absolute;
            right: 19px;
            top: 24px;
            padding-bottom:14px; /* <--that makes the difference */
          }
          .container_header_buttonburger:hover > .header_buttonburger:before {
            top: calc(100% + 4px);
          }
          .container_header_buttonburger:hover > .header_buttonburger:after {
            top: calc(100% + 12px);
          }

- sebdev