CSS过渡，位置在悬停时不断移动答案

【问题标题】：CSS transition, position keeps moving on hoverCSS过渡，位置在悬停时不断移动
【发布时间】：2016-09-12 00:11:47
【问题描述】：

我在right 属性上有一个简单的css 转换，用于在您悬停时简单地移动箭头的按钮。问题是当您悬停时，它没有正确转换，如果您刷新（或重新运行）JSFiddle，那么您会注意到箭头在悬停后移动位置。

就像它向后移动，然后向前然后又回来？

这似乎只发生在 Firefox 中。

JSFiddle

【问题讨论】：

你想让箭头在悬停时无限移动吗？
当您悬停时，它应该向右移动，但它会先向左然后向右移动。然后，如果您刷新/重新运行，它会重新定位箭头。
对我来说看起来不错。 OSX 上的 Chrome 50
看起来是 Firefox 问题！
似乎箭头用于“悬停”的位置正在呈现为开始位置（在 Firefox 中）。当您将鼠标悬停在按钮上时，它会突然识别出开始位置不同，因此从那里开始播放动画。这就是你看到“跳跃”的原因。我会做一些摆弄，但它可能是一个 FF 错误。

标签： html css firefox css-transitions

【解决方案1】：

发现问题。您的 span 是内联的，给它position: relative 会导致问题。

只需更改为 inline-block 即可：

.genericBtn span {
  display: inline-block;
  position: relative;
}

【讨论】：

这就是我要说的。我对你的支持。另一种解决方案是删除跨度，这是不必要的
你比我早 8 秒得到答案，所以删除我的回复；)
@AaronLavers 一直发生在我身上！ :D
不知道这个......直到谢谢:)
感谢 Narxx！我添加跨度的唯一原因是我可以相对于文本而不是整个按钮定位箭头。

【解决方案2】：

如何通过使用 CSS 伪元素来使用更微妙的方法：

.genericBtn {
  background: #ffffff;
  color: #c40009;
  border: 1px solid #c40009;
  font-size: 20px;
  margin: 10px 0 0;
  padding: 20px 50px 20px 30px;
  width: 300px;
  position: relative;}

.genericBtn::after {
  content: ">";
  position: absolute;
  right: 37%;
  transition: all .3s ease-in;
}

.genericBtn:hover::after {
  transform: translate(10px,0); }

这是Fiddle

【讨论】：