悬停效果闪烁的 CSS 动画，在 FF 中未正确显示

Posted 2023-03-06

【中文标题】悬停效果闪烁的 CSS 动画，在 FF 中未正确显示

【英文标题】：CSS animation for hover effect flickers, not properly showing in FF

【发布时间】：2021-05-20 14:29:16

【问题描述】：

感谢您阅读并提供帮助。

我认为我的 CSS 代码不应该太复杂，但是，它的行为并不是我想要的。

预期结果：当鼠标悬停在按钮上时，有一个背景区域“折叠起来”（没有背景色到深色背景色）。

实际结果：

在 Chrome（版本 88.0.4324.146）中工作，但是，它有一个闪烁，就像它正在一次又一次地重建一样。这种情况尤其发生在从顶部悬停时。从底部执行时看起来不错，但速度较慢。 我还看到它在 FF（开发版 86.0b9）中似乎无法正常工作。有时它会弹出，但如果弹出，它只会弹出一次。刷新浏览器窗口也无济于事。

我已经尝试在它周围添加一个 <div> 并将悬停动画应用到它，用前缀修复它......到目前为止，我无法使其工作（顺利），问题始终存在。

所以，这是现在的代码，也可以在这个codepen example中找到

html:

  <button class="btn">
    click
  </button>

CSS：

.btn 
  height: 48px;
  width: 200px;
  text-align: center;
  text-transform: uppercase;

  border: none;
  border-bottom: 1px solid steelblue;
  position: relative;
  color: steelblue;
  background: transparent;

  ::before 
    bottom: 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    z-index: -1;
  

  &:hover,
  &:focus 
    animation: one 0.25s linear;
    background-color: steelblue;
    color: whitesmoke;
    opacity: 1;
    transform-origin: 50% 100%;
  

  @keyframes one 
    0% 
      transform: perspective(1000px) rotateX(90deg);
    
    100% 
      transform: perspective(1000px) rotateX(0);
    
  

如果这是重复的，则表示我还没有找到帮助答案，我很乐意提供任何解决方案和提示。

【问题讨论】：

其他浏览器能用吗？

safari 也没有用，Jorge 的回答解决了我的问题

【参考方案1】：

这个问题也发生在 Chrome 中。发生这种情况是因为您正在更改按钮的视角，这将改变其“边界框”。

所以当鼠标悬停在边界框上时，动画会改变边界框，然后鼠标不在边界框上，所以动画停止，然后鼠标又在边界框上，所以动画开始，等等。

要解决此问题，请在按钮周围创建一个容器，并让计数器更改按钮透视图，而不是按钮更改透视图本身。当你这样做时，容器将保留它的边界框：

.bcg 
  display: flex;
  justify-content: center;
  align-items: center;
  background: whitesmoke;
  height: 100vh;

.btncontainer 
  display: inline-block;

.btncontainer:hover .btn, .btncontainer:focus .btn 
  animation: one 0.25s linear;
  background-color: steelblue;
  color: whitesmoke;
  opacity: 1;
  transform-origin: 50% 100%;


@keyframes one 
  0% 
    transform: perspective(1000px) rotateX(90deg);
  
  100% 
    transform: perspective(1000px) rotateX(0);
  


.btn 
  height: 48px;
  width: 200px;
  text-align: center;
  text-transform: uppercase;

  border: none;
  border-bottom: 1px solid steelblue;
  position: relative;
  color: steelblue;
  background: transparent;

.btn::before 
  bottom: 0;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  z-index: -1;

<div class="bcg">
  <div class="btncontainer">
    <button class="btn">
      click
    </button>
  </div>
</div>