关键帧动画影响其他元素

Question

我正在开发一个 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>

下面是与上述代码配套的 style.css 代码：

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;
}
}
}

Answer 1

transform: translateY不会影响页面流量：

body {
  background: #000;
}

h2.titlefade {
  color: white;
  text-align: center;
  font-style: italic;
  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;
  }
}

@keyframes titlefadeanimation {
  from {
    opacity: 0;
    font-size: 63;
    transform: translateY(25px);
  }
  50% {
    transform: translateY(30px);
  }
}

<div class="homepagetitle">
  <div class="titlefade">
    <h2 class="titlefade">
      Title
    </h2>
    <h2 class="homepagesubtitle">
      Subtitle
    </h2>
  </div>
</div>
<div class="aboutus">
  <p class="aboutus">
    Content
  </p>
</div>

您必须根据需要调整它，但您明白了。

此外，对于 @keyframes，如果您使用 from 并且 to 的值只是默认值，您可以完全省略 to。

关键帧动画影响其他元素

Keyframe Animation affects other Elements

html

css

keyframe

css-animations