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。

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

1 个答案: