悬停时向上移动HTML元素

每当用户将鼠标悬停在HTML上时，我会尝试将其向上移动大约10px。我对学校做了一些研究，但找不到任何对我有帮助的信息。他们的大多数动画示例都使用关键帧，我很确定这不是我需要的，因为我试图在有人悬停在元素上时触发动画。我可能错了，这就是为什么我在这里发帖

以下是我试图移动的元素：

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

---

我不确定需要添加什么才能使元素具有动画效果，w3schools上的示例没有太大帮助。如果有人能给我指出正确的方向，我将不胜感激。谢谢堆栈溢出。

这个简单的动画不需要使用关键帧。只要CSS转换就足够了

在初始状态样式规则中设置带有持续时间的

转换

属性

#箭头{
位置：相对位置；
排名：0；
过渡：top ease 0.5s；
}
#箭头：悬停{
顶部：-10px；
}

---

如果元素处于绝对位置，也可以尝试在悬停时应用负数

边距顶部

：

div{
填充：1em；
边框：1px实心#b5；
边界半径：10px；
宽度：适合的内容；
过渡：0.5s；
}
div:悬停{
盒影：0 0 3px黑色；
利润上限：-10px；
}

#箭头{
位置：相对位置；
排名：0；
过渡：top ease 0.5s；
}
#箭头：悬停{
顶部：110px；
}

您可以在悬停时使用关键帧动画；通过这种或那种方式，您正在悬停时设置样式更改。虽然在这种情况下，您只需要从点A移动到点B，所以不需要关键帧（检查CSS转换）。谢谢bhai Life saver

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

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