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

感谢阅读并提供帮助

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

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

实际结果：

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

我已经尝试在它周围放置一个

，并将悬停动画应用到它，用前缀修复它。。。到目前为止，我无法使它（顺利）工作，这个问题一直存在

这就是现在的代码，也可以在这里找到

html:

---

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

这个问题也发生在Chrome上。这是因为您正在更改按钮的透视图，这将更改其“边界框”

因此，当您将鼠标悬停在边界框上时，动画将更改边界框，然后鼠标不悬停在边界框上，因此动画停止，但随后鼠标再次悬停在边界框上，因此动画开始，依此类推

要解决此问题，请在按钮周围创建一个容器，并使countainer更改按钮透视图，而不是按钮更改透视图本身。执行以下操作时，容器将保留其边界框：

.bcg{
显示器：flex；
证明内容：中心；
对齐项目：居中；
背景：白烟；
高度：100vh；
}
.BTN容器{
显示：内联块；
}
.btn容器：悬停.btn，.btn容器：焦点.btn{
动画：一个0.25秒线性；
背景颜色：钢蓝色；
颜色：白烟；
不透明度：1；
变换原点：50%100%；
}
@关键帧1{
0% {
变换：透视（1000px）旋转（90度）；
}
100% {
变换：透视（1000px）旋转（0）；
}
}
.btn{
高度：48px；
宽度：200px；
文本对齐：居中；
文本转换：大写；
边界：无；
边框底部：1px纯色钢蓝色；
位置：相对位置；
颜色：钢蓝色；
背景：透明；
}
.btn：：之前{
底部：0；
内容：“；
身高：100%；
左：0；
不透明度：0；
位置：绝对位置；
右：0；
z指数：-1；
}

点击

它能与其他浏览器配合使用吗？safari也不能，Jorge的回答解决了我的问题

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

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