html - 我需要帮助组合 CSS 动画

Question

我对 HTML 和 CSS 还是很陌生，所以我的很多代码都很糟糕。我需要帮助弄清楚如何组合我创建的两个动画。我希望第一个动画(当前位于顶部)完全播放，然后在大约 3 秒后第二个向左缓慢滚动的动画将播放并在之后保持隐藏状态。

这是我的代码

body {
  font-family: 'Aldrich', sans-serif;
  position: relative;
  line-height: 22px;
  font-size: 18px;
  width: 1200px;
  /* color: ##FFFFFF    ;
  background: #000000; */
  overflow: hidden;
}

.text {
  font-family: 'Aldrich', sans-serif;
  position: relative;
  line-height: 20px;
  font-size: 18px;
  width: 900px;
}

.fadingEffect {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  background: white;
  animation: show 5s ease-in;
  animation-fill-mode: forwards;
  /* animation-delay: 1s; */
}

.item {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  background: white;
  animation-duration: 12s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

.item {
  animation-name: anim-1;
}

@keyframes show {
  0% {width:100%}
  100% {width:0%;}
}

@keyframes anim-1 {
  0%,50% { left: 0%; opacity: 1; }
  50%,90% { left: 0%; opacity: 1; }
  90%, 100% { left: -100%; opacity: 0; }
}

<div class="text">
  <link href="https://fonts.googleapis.com/css2?family=Aldrich&display=swap" rel="stylesheet">
  <link href="faded.css" rel="stylesheet" type="text/css">
  <link href="slide.css" rel="stylesheet" type="text/css"> Defeat all of the enemies!
  <p class="item">Defeat all of the enemies!</p>
  <div class="fadingEffect"></div>
</div>

Answer 1

就像另一个人说的，你应该用 javascript 或 jQuery 试试。但是如果你想只用 CSS 来实现它，动画延迟就可以做到。

这里有一个类似的示例，只是给你一些理想。

div.box{
  position: relative;
}
div.first {
  position: absolute;
  left: -200px;
  animation: myfirst 3s 1;
  animation-direction: alternate;
}
div.second {
  position: absolute;
  left: -200px;
  animation: mysecond 3s 1;
  animation-delay: 3s;
  animation-direction: alternate;
}
@keyframes myfirst {
  0%   {left: -200px; top: 0px; opacity: 0;}
  100%  {left: 200px; top: 0px; opacity: 1;}
}
@keyframes mysecond {
  0%   {left: 200px; top: 0px;}
  100%  {left: -200px; top: 0px;}
}

<div class="box">
<div class="first">Defeat all of the enemies!</div>
<div class="second">Defeat all of the enemies!</div>
</div>