html - 当另一个动画 div 通过时，如何隐藏我的动画文本？

Question

我正在尝试制作一个网站，在该网站上加载页面时，div 会从占据整个浏览器窗口到完全超出框架。同时，一些居中的文本从不透明度 0 变为 1，但是当我加载页面时，文本以某种方式位于滑开的 div 之上。我尝试在文本上设置一个动画延迟，以便它在 div 通过后出现，但它看起来不像我想要的样子。另外，对于困惑的代码，我深表歉意，我是新手。

这是 fiddle : https://jsfiddle.net/3qz4LgmL/

body {
  margin: 0px 0px 0px 0px;
  height: 100vh;
  background: red; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(#b485f2, #d879fa); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#b485f2, #d879fa); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#b485f2, #d879fa); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#b485f2, #d879fa); /* Standard syntax (must be last) */
  background-repeat: none;
  overflow:hidden;
}

#slide {
  width: 0px;
  height: 100vh;
  background: #d82bc4; /* Old browsers */
  background: -moz-linear-gradient(-45deg, #d82bc4 0%, #7c00e2 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #d82bc4 0%,#7c00e2 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #d82bc4 0%,#7c00e2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d82bc4', endColorstr='#7c00e2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  animation: slideaway;
  animation-duration: 3.4s;
  position: absolute;
}

@keyframes slideaway {
  40%{width: 100%}
  100%{width: 0px}
}

#title {
  margin: 0px 0px 0px 0px;
  font-family: Baloo Bhaina;
  color: white;
  font-size: 45pt;
  animation: slideright;
}

#sub {
  font-family: Helvetica;
  color: aqua;
  font-size: 45px;
  text-shadow: 2px 2px #285aad;
  animation: slideright;
  animation-duration: 4.5s;
  margin-top: 10vh;
}

#titles {
  height: 120vh;
  display: inline-block;
}

.button {
  background-color: #862224;
  width: 30%;
  border-radius: 8px;
  box-shadow: 3px 3px #6d191b;
  font-family: Baloo Bhaina;
  color: white;
  padding-top: 12px;
  padding-bottom: 8px;
}

@keyframes slideright {
  0%{opacity: 0}
  100%{opacity: 1}
}

.button:hover {
  background-color: #681113;
  width: 30%;
  border-radius: 8px;
  font-family: Baloo Bhaina;
  color: white;
  padding-top: 12px;
  padding-bottom: 8px;
  animation-iteration-count: 1;
}

.arrowdown {
  height: 50px;
  width: 70px;
  margin: 0px 0px 0px 0px;
}

.arrowbox {
  background-color: #862224;
  border-radius: 5px;
  display: inline-block;
  height: 45px;
  box-shadow: 3px 3px #6d191b;
}

.arrowbox:hover {
  background-color: #681113;
  border-radius: 5px;
  display: inline-block;
  height: 45px;
  box-shadow: 3px 3px #6d191b;
}

.faces {
  background-color: white;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  height: 300px;
  width: 300px;
}

<div id="slide"></div>
<center><div id="titles">
<center><p id="title">DJ VORT-X</p></center><br><br><br><br>
<p id="sub">All-round music for your event</p>
<br><br><br><br>
<center><div class="button"><center>CONTACT ME</center></div></center>
<br><br><br><br><br><br><br><br>
<div class="arrowbox"><img class="arrowdown" src="arrowdown.png"></div>
</div>
</center>

Answer 1

只需将 z-index: 1 添加到您的 #slide:

#slide {
    width: 0px;
    height: 100vh;
    background: #d82bc4; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #d82bc4 0%, #7c00e2 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #d82bc4 0%,#7c00e2 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #d82bc4 0%,#7c00e2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d82bc4', endColorstr='#7c00e2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    animation: slideaway;
    animation-duration: 3.4s;
    position: absolute;
    z-index: 1;
}