Mouseover/hover 在 Firefox 中使用旋转（无限旋转）的错误

Question

我遇到这样的问题：

将鼠标悬停在右侧，heree 一词所在的位置，您将无休止地旋转（我使用 Firefox）。

如何解决？

button{
  transition: 0.5s all;
  transform:none;
}

button:hover{
   transform:rotateY(360deg) scale(1.4);
  margin:5px;
}

<button id="mybutton" >sumbittttttttttttttttttttt heree!</button>

P.S。如果我删除 margin 参数，那么它就可以正常工作。但是我也想要保证金！

Answer 1

看起来您的 button:hover + margin 正在通过 0.5s 进行转换以及转换。您只需要对过渡更加具体：transition: 0.5s transform;

button{
  transition: 0.5s transform;
  transform:none;
}

button:hover{
  transform:rotateY(360deg) scale(1.4);
  margin:5px;
}

<button id="mybutton" >sumbittttttttttttttttttttt heree!</button>

Answer 2

我相信这是因为 all 过渡。

只为 transform 设置它，我想问题在这里已经解决了——在 Firefox 中可能是按钮 hover 上的 scaling 和 margin 的组合导致了这个问题。

button{
  transition: 0.5s transform;
  transform:none;
}

button:hover{
   transform:rotateY(360deg) scale(1.4);
  margin:5px;
}

<button id="mybutton" >sumbittttttttttttttttttttt heree!</button>

让我知道您对 this.Thanks 的反馈！

Mouseover/hover bug using Rotate (endless rotation) in Firefox