在向下移动/从顶部翻译时淡入元素的方法?

Question

我正在尝试找出一种方法，使特定网页的第一个标题和段落在淡入时同时从顶部翻译到位。

我已经研究了使用@keyframes，这绝对是解决方案。但话虽如此，我仍然无法找到一种在不指定要翻译的设定距离的情况下翻译元素的方法。相反，我只想将元素从顶部翻译到它们当前的位置(或者它们本来会在哪里(。

这是我的网站供参考：http://thefloodplains.com/About.html。我目前有淡入的第二部分(没有翻译(，但我希望顶部部分从顶部淡入。

基本上我想做的是：https://www.w3schools.com/CSSref/tryit.asp?filename=trycss3_keyframes，但没有指定数量的像素来翻译 - 我只想将其从顶部转换为当前位置。

这是另一个类似的例子，但我不想要淡出效果(第一个(：https://codepen.io/kianoshp/pen/PPeWzb。

@keyframes topFadeOut {
0% {
position: absolute;
top: -3rem;
opacity: 0;
}
75% {
position: absolute;
top: 25%;
opacity: 1;
}
100% {
opacity: 0;
}
}

任何和所有的帮助将不胜感激。祝你有美好的一天！

Answer 1

.box {
height: 20rem;
margin: 0 auto;
overflow: hidden;
position: relative;
}
@keyframes topFadeOut {
0% {
position: absolute;
top: -3rem;
opacity: 0;
}
100% {
position: absolute;
top: 25%;
opacity: 1;
}
}
h {
font-size: 45px;
color: #00A5D1;
font-family: 'Gentium Basic', Verdana, 'Slabo 27px', 'Vollkorn', serif;
position: absolute;
top: 5rem;
opacity: 1;
left: 0;
right: 0;  
display: flex;
justify-content: center;
animation-name: topFadeOut;
animation-duration: 5s;
}

<section class="box">
<h>The Floodplains</h>
</section>