我需要帮助组合 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

我将文本放在<div> 中以完成这项工作。

这是我为了让动画正常工作而添加的主要 CSS。

white-space: nowrap;（这使得当 div 很小时文本不会换行。） overflow: hidden;（这会隐藏 div 之外的文本。因此，当您扩展 div 的宽度时，它会显示文本。）

您可以随意调整 %s 和动画持续时间以使其更快或更慢，具体取决于您要查找的内容。

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

.item {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  color: black;
  white-space: nowrap;
  overflow: hidden; 
  width: 100%;
  height: auto;
  animation: show 10s ease-in;
  animation-fill-mode: forwards;
}

@keyframes show {
  0% {width:0%; left: 0%}
  30% {width:100%;}
  55% { left: 0%; opacity: 1; }
  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">
  <div class="item"><p>Defeat all of the enemies!</p></div>
</div>

Answer 2

就像另一个人说的，你应该用 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>