Html 关键帧动画会影响其他元素

我正在开发一个WordPress网站，其中包括一段文本的关键帧动画。在关键帧动画中，文本在淡入时向上滑动。关键帧效果很好，但唯一的问题是关键帧下的所有文本和元素最终也会向上滑动。它们不会褪色。但它们会向上滑动。我认为这是因为当关键帧移动时，它们会随着关键帧进行调整，因为关键帧基本上是在调整它们上方的边距。如何使关键帧动画下方的元素忽略关键帧基本上创建的移动边距？以下是我的代码片段：

<div class="homepagetitle">
    <div class="titlefade">
        <h2 class="titlefade"><?php echo $homepagetitle; ?></h2>
        <h2 class="homepagesubtitle"><?php echo $homepagesubtitle; ?></h2>
    </div>
</div>
<div class="aboutus">
    <p class="aboutus"> <?php the_content(); ?></p>
</div>

---

transform:translateY

不会影响页面的流动：

正文{
背景：#000；
}
h2.标题页{
颜色：白色；
文本对齐：居中；
字体：斜体；
字体大小：65px；
字间距：10px；
字母间距：2px；
字体系列：“Ubuntu”，无衬线；
动画：titlefadeanimation ease 1.5s；
}
h2.homepagesubtitle{
颜色：白色；
文本对齐：居中；
字体大小：35px；
字距：5px；
字母间距：1px；
字体系列：“Ubuntu”，无衬线；
动画：字幕1.5s；
}
@关键帧淡入淡出{
从{
不透明度：0；
}
}
@关键帧标题动画{
从{
不透明度：0；
字号：63；
变换：translateY（25px）；
}
50% {
变换：translateY（30px）；
}
}

标题
字幕

内容

h2.titlefade {
color: white;
text-align: center;
font-style: italic;
margin-top: 350px;
font-size: 65px;
word-spacing: 10px;
letter-spacing: 2px;
font-family: 'Ubuntu', sans-serif;
animation: titlefadeanimation ease 1.5s;
}

h2.homepagesubtitle {
color: white;
text-align: center;
font-size: 35px;
word-spacing: 5px;
letter-spacing: 1px;
font-family: 'Ubuntu', sans-serif;
animation: subtitlefade ease 1.5s;
}

@keyframes subtitlefade {
from {
    opacity: 0;
}
to {
    opacity: 1;
}
}

@keyframes titlefadeanimation {
0% {
    opacity: 0;
    font-size: 63
    margin-top: 525px;
}
50% {
    margin-top: 300px;
}
100% {
    opacity: 1;
    margin-top: 350px;
}
}
}