关键帧动画影响其他元素答案

【问题标题】：Keyframe Animation affects other Elements关键帧动画影响其他元素
【发布时间】：2020-08-08 05:12:31
【问题描述】：

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

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

【问题讨论】：

标签： html css css-animations keyframe

【解决方案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。

【讨论】：