如何在序列中运行CSS文本动画。 （一行接一行）

Question

我有这个小提琴：https://jsfiddle.net/8uwu59sL/目前它正在同时键入每一行，但我想让它在一行接一行地输入，行之间有第二个长延迟。

这是HTML：

<p>First Line...</p>
<p>Second Line...</p>
<p>Third Line...</p>
<p>Fourth Line...</p>
<p>Fifth Line...</p>
<p>Sixth Line...</p>
<br>
<p>Final/Blinking Line<span>|</span></p> 

这就是CSS：

body{
  background: #000;
  padding-top: 10px;
} 

p{
  color: lime; 
  font-family: "Courier";
  font-size: 20px;
  margin: 10px 0 0 10px;
  white-space: nowrap;
  overflow: hidden;
  width: 30em;
  animation: type 4s steps(60, end); 
}

p:nth-child(2){
  animation: type2 8s steps(60, end);
}

p a{
  color: lime;
  text-decoration: none;
}

span{
  animation: blink 1s infinite;
}

@keyframes type{ 
  from { width: 0; } 
} 

@keyframes type2{
  0%{width: 0;}
  50%{width: 0;}
  100%{ width: 100; } 
} 

@keyframes blink{
  to{opacity: .0;}
}

::selection{
  background: black;
}

我想知道，我该怎么做？ 此外，是否有可能让最后一行（“最终/闪烁线”）缓慢闪烁，并具有“|”也眨眼，但速度不同？ 提前感谢您对此的任何帮助！

Answer 1

您需要管理animation-delay值，一种方法是使用:nth-child选择器为CSS设置每个值，但如果您可以使用Jquery，请尝试：

＆＃13;

＆＃13;

$('p').each(function(i) {
  $(this).css({
    "animation-delay": i + "s"
  })
});

＆＃13;

body {
  background: #000;
  padding-top: 10px;
}
p {
  width: 0;
  color: lime;
  font-family: "Courier";
  font-size: 20px;
  margin: 10px 0 0 10px;
  white-space: nowrap;
  overflow: hidden;
  animation: type 4s steps(60, end) forwards;
}
p a {
  color: lime;
  text-decoration: none;
}
span {
  animation: blink 1s infinite;
}
@keyframes type {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes blink {
  to {
    opacity: .0;
  }
}
::selection {
  background: black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>First Line...</p>
<p>Second Line...</p>
<p>Third Line...</p>
<p>Fourth Line...</p>
<p>Fifth Line...</p>
<p>Sixth Line...</p>
<br>
<p>Final/Blinking Line<span>|</span>
</p>

＆＃13;

＆＃13;

＆＃13;

Answer 2

PURE CSS方法：

要实现您的第一个要求，您需要使用css选择器:nth-child()。如何使用它：element：nth-​​child（n）其中n表示父元素中子元素的索引。

对于另一个，您需要将文本与“|”分开每个都在一个单独的<span>中，以不同的动画持续时间（速度）单独定位它们。

编辑：

如果您可以使用JQuery并且计划随着时间的推移添加更多行，我建议使用 DaniP的答案，它的可扩展性更高，而不必担心为每行添加新的css选择器。如果你想定位一个特定的行来改变像animation-duration这样的东西，你可以单独添加一个id并使用css来定位它们。

body {
  background: #000;
  padding-top: 10px;
}
p {
  color: lime;
  font-family: "Courier";
  font-size: 20px;
  margin: 10px 0 0 10px;
  white-space: nowrap;
  overflow: hidden;
  width: 0;
  opacity: 0;
  animation: type 4s steps(60, end) forwards;
  -webkit-user-select: none;
  user-select: none;
}
p:nth-child(2) {
  animation-delay: 1s;
}
p:nth-child(3) {
  animation-delay: 2s;
}
p:nth-child(4) {
  animation-delay: 3s;
}
p:nth-child(5) {
  animation-delay: 4s;
}
p:nth-child(6) {
  animation-delay: 5s;
  margin-bottom: 25px;
}
p:nth-child(7) {
  animation-delay: 6s;
}
p:nth-child(7) span:first-child {
  animation-duration: 0.8s;
}
span {
  animation: blink 1.8s infinite 8s;
}
p a {
  color: lime;
  text-decoration: none;
}
@keyframes type {
  0% {
    opacity: 1;
  }
  100% {
    width: 30em;
    opacity: 1;
  }
}
@keyframes blink {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
::selection {
  background: black;
}

<p>First Line...</p>
<p>Second Line...</p>
<p>Third Line...</p>
<p>Fourth Line...</p>
<p>Fifth Line...</p>
<p>Sixth Line...</p>
<p><span>Final/Blinking Line</span>  <span>|</span>
</p>

Answer 3

所以我先回答你原来的问题，因为上面的设置相当简单（看起来很酷，顺便说一下）。无论如何，你需要在每一行中添加以下内容，以便错开动画：

p:nth-child(2) {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}
p:nth-child(3) {
  -webkit-animation-delay: 84s;
  animation-delay: 8s;
}

基本上，只需延迟上述行完成“输入”所需的秒数。我会进一步了解你关于闪烁率的问题！