悬停时将HTML元素向上移动

Question

当用户将鼠标悬停在一个 HTML 元素上时，我想将它向上移动约 10px。我在 w3schools 上进行了一些研究，但是我没有找到任何有用的信息。他们大部分的动画示例都使用关键帧，我相信那不是我需要的，因为我想在有人悬停在元素上时触发动画。不过我可能错了，这就是我在这里发布帖子的原因。

以下是我要移动的元素：

<div id="arrow">
  <a href="#"><i class="fa fa-arrow-down fa-2x"></i></a>
</div>

对于我的CSS：

#arrow {
  padding-top: 310px;
  color: #5C6B7E;
  position: relative;
  /* some kind of animation property here? */
}

#arrow:hover {
  /* new properties once user hovers */
}

我不确定需要添加什么来使元素向上动画，w3schools上的例子没有太大的帮助。如果有人能指点我正确的方向，我将非常感激。谢谢 Stack Overflow。

- user3635683

---

你可以在鼠标悬停时使用关键帧动画；无论如何，你都会在悬停时设置样式更改。虽然在这种情况下，你只需要从A点移动到B点，所以不需要使用关键帧（请查看CSS过渡）。 - Jasper

Answer 1

对于这个简单的动画，您无需使用关键帧。只需要CSS过渡即可。

在初始状态的样式规则中设置transition属性并指定持续时间。

编辑：我刚刚注意到底部有一个闪烁，可以通过在图标上设置样式并在父元素上设置悬停来去除它。

#arrow i {
  position: relative;
  top: 0;
  transition: top ease 0.5s;
}
#arrow:hover i {
  top: -10px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<div id="arrow">
  <a href="#"><i class="fa fa-arrow-down fa-2x"></i></a>
</div>

- m4n0

Answer 2

如果您的元素是绝对定位的，也可以尝试在悬停时应用负margin-top:

div {
  padding: 1em;
  border: 1px solid #b5b5b5;
  border-radius: 10px;
  width: fit-content;
  transition: 0.5s;
}

div:hover {
  box-shadow: 0 0 3px black;
  margin-top: -10px;
}

<br/>
<div>
  <img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1">
</div>

- Spectric

Answer 3

我在尝试解决鼠标悬停在元素上时，使该元素移动的问题时发现了这个。但以上所有方法都不起作用，所以我想分享我在测试中找到的解决方案:

.item {
  background-color: black;
  display: flex;
  width: 100px;
  height: 40px;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  transition: transform ease 300ms;
}

.item:hover {
  transform: translate(0, -10px);
}

<div class="item">TEST</div> 

- hellobobbysouza