CSS 动画中的连续文本答案

【问题标题】：Sequential text in CSS animationsCSS 动画中的连续文本
【发布时间】：2020-01-11 16:10:15
【问题描述】：

我正在尝试创建一个连续的文本动画。一行，然后是下一行，然后是下一行。但它同时为所有三行设置动画。

.autotype {
  overflow: hidden;
  white-space: nowrap;
}

.autotype {
  animation: autotype 8s steps(10, end);
  animation-iteration-count: infinite;
}

@keyframes autotype {
  from {
    width: 0px;
  }
}

@keyframes autotype {
  0% {
    width: 0px;
  }
  20% {
    width: 70px;
  }
  40% {
    width: 140px;
  }
  60% {
    wdith: 210px;
  }
  80%. {
    width: 280px;
  }
  100% {
    width: 500px;
  }
}

.alignnone {
  height: 20px;
  width: 50px;
  position: relative;
  top: 4px;
}

<div class="autotype">.
  <p>Hello, and welcome to
    <img src="http://4309.co.uk/wp-  
content/uploads/2020/01/
Screenshot_20200110_150836- 
300x115.jpg" alt="" width="300" height="115" class="alignnone size-medium 
wp-image-8431" />Feel free to look</p>
  <p>around the site and contact us via the form<br> on the contact page</div>

那么，我如何对其进行动画处理以使其显示第一行，并且只有在完全显示时才开始第二行，依此类推。我已经尝试在动画本身中使用高度，但是，虽然这适用于第一行，但当它在下一行变得更高时，它们已经渲染了。

【问题讨论】：

标签： html css css-animations

【解决方案1】：

由于 CSS 无法检测字符，我建议你

在单独的类autotype1、autotype2 和autotype3 中换行。
最初使用width: 0 或opacity: 0; 隐藏其他行
将animation-delay 与2n, 3n 之类的时间结合使用以使其连续。
如果你想让它无限，你可能想在这些答案的帮助下添加一点 JS：CSS animation delay in repeating

.autotype {
  overflow: hidden;
  white-space: nowrap;
}

.autotype {
  animation: autotype 4s steps(10, end);
  animation-fill-mode: forwards;
}

.autotype2 {
  width: 0;
  animation-delay: 4s;
  margin-bottom: 0;
}

.autotype3 {
  width: 0;
  animation-delay: 8s;
  margin-top: 0;
}

@keyframes autotype {
  from {
    width: 0px;
  }
}

@keyframes autotype {
  0% {
    width: 0px;
  }
  20% {
    width: 70px;
  }
  40% {
    width: 140px;
  }
  60% {
    width: 210px;
  }
  80%. {
    width: 280px;
  }
  100% {
    width: 500px;
  }
}

.alignnone {
  height: 20px;
  width: 50px;
  position: relative;
  top: 4px;
}

<div>.
  <p class="autotype autotype1">Hello, and welcome to
    <img src="http://4309.co.uk/wp-  
content/uploads/2020/01/
Screenshot_20200110_150836- 
300x115.jpg" alt="" width="300" height="115" class="alignnone size-medium 
wp-image-8431" />Feel free to look</p>
  <p class="autotype autotype2">around the site and contact us via the form<br>
  </p>
  <p class="autotype autotype3"> on the contact page</p>
</div>

【讨论】：