悬停时向上移动 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 上的示例没有太大帮助。如果有人能指出我正确的方向，我将不胜感激。谢谢堆栈溢出。

原文由 user3635683 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 发布，翻译遵循 CC BY-SA 4.0 许可协议