html - 向下移动/从顶部平移时淡入元素的方法？

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>