Css hover animation 閃爍/循環

Question

我有一個關於 animation 的問題。

我的 animation 閃爍，我想停止觸發循環。 當我在 hover 之后和之前進行這些操作時，就像循環我的 animation 一樣。 我嘗試了一些小事情，但沒有任何線索......

也許我應該嘗試用 span（之前替換）和 position absolute 來做？

這是代碼筆： 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>

如果有人可以幫助我：:)

非常感謝

Answer 1

您需要在容器上為按鈕和 hover 創建一個容器，如下所示：

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

對於 styles

     .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);
          }

所以所有的styles：

              .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);
          }