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

Question

感谢阅读并提供帮助。

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

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

实际结果：

适用于 Chrome（版本 88.0.4324.146），但是，它会闪烁，就像它一次又一次地重建一样。这种情况尤其发生在从顶部悬停时。从底部开始做时看起来还不错，而且相当慢。
我还看到它似乎在 FF (Dev Edition 86.0b9) 中不起作用。有时它会弹出，但如果弹出，也只会弹出一次。刷新浏览器 window 也无济于事。

我已经尝试在它周围添加一个 <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);
    }
  }
}

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

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

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

CSS animation for hover effect flickers, not properly showing in FF

css

firefox

google-chrome

hover