Css悬停动画闪烁/循环

Posted 2023-03-06

【中文标题】Css悬停动画闪烁/循环

【英文标题】：Css hover animation flickering/looping

【发布时间】：2021-07-21 14:59:17

【问题描述】：

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

我的动画在闪烁，我想停止触发循环。当我在这些前后悬停时，就像循环我的动画一样。我尝试了一些小事情，但没有任何线索......

也许我应该尝试使用绝对位置的跨度（之前替换）来做到这一点？

这里是代码笔：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>

如果有人可以帮助我！ :)

非常感谢

【问题讨论】：

您的样本中没有发生任何事情？

codepen.io/chrishanZ/pen/eYgoLBG 真的很抱歉这里是codepen

循环播放是什么意思？我没有看到悬停效果有任何闪烁或问题

@RolvApneseth 尝试将光标放在“菜单”下的两条线的中间

@DUTTOOChris 我明白你的意思。当您将鼠标悬停在底线上方时，线条会上下移动。

【参考方案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);