html - 悬停时向上移动 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。

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>