Css hover animation flickering/looping

Question

I have a question about an animation.

My animation is flickering, I want to stop that trigger looping. When I hover these after and before it's like looping my animation. I've tried little things but no clue...

Maybe should i try to do it with span (replace before) with position absolute?

Here is the codepen: https://codepen.io/chrishanZ/pen/eYgoLBG

Thanks for helping me.

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

If someone can help me: :)

Thanks a lot

Answer 1

you need to create a container for the button and hover on the container like this:

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

and for the 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);
          }

so all the 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);
          }