Html 如何在CSS中无限地上下移动div？

我正在尝试做一个简单的任务，上下移动一个div，使用bottom而不是top来实现浮动/悬停效果

我不熟悉CSS和关键帧！正如你可能知道的。但以下是我尝试过的，但它似乎没有起到任何作用：

.Mail{
利润上限：-77px；
左边距：791px；
动画：上下移动1s线性无限；
}
@关键帧向上向下移动{
0%, 100% {
底部：0；
}
50% {
底部：20px；
}
}

---

您需要将其

位置设置为
绝对
，以便
底部
属性生效：


.Mail{
利润上限：-77px；
左边距：791px；
位置：绝对位置；
底部：0；
动画：上下移动1s线性无限；
}
@关键帧向上向下移动{
50%{底部：20px}
}

底部
，
顶部
，
右侧
，
左侧
需要一个
位置
属性。默认的
位置
值为
静态
，与其他值一样无效。我强烈建议阅读
底部
指南，查看其对不同
位置
值的影响

无论如何，您的
动画
代码是正确的。但是，您需要了解
position
属性在CSS中是如何工作的，以避免类似的错误

附言：从理解以下内容开始：
relative
绝对值
修复了
，这里有一个来自
的很好的资源，对于其他正在寻找同样东西的人来说，这里有一个更简单的答案，使用
transform:translateY（）：


。移动div{
边缘顶部：100px；
动画名称：移动；
动画持续时间：1s；
动画迭代次数：无限；
动画方向：交替；
}
@关键帧移动{
0% {
转化：translateY（25%）；
}
100% {
转化：translateY（-25%）；
}
}

我在上下移动
您需要定位元件（任何非静态元件）-顶部和底部仅在定位元件上工作。我该如何定位？