CSS动画中的连续文本

Question

我试图创建一个连续的文字动画。先是一行，然后是下一行，再然后是下一行。但它会同时动画三行文字。

.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>

那么如何使其动画效果呈现出每行逐个显示，只有当第一行完全显示后才开始显示下一行。我尝试在动画本身中使用高度，但是，虽然这对第一行有效，但当下一行高度增加时，它们已经被渲染出来了。

- Amg

Answer 1

既然CSS无法检测字符，建议您采用以下方法：

1. 将行包裹在单独的类autotype1、autotype2和autotype3内。
2. 使用width: 0或opacity: 0;隐藏其他行。
3. 使用animation-delay进行定时，例如2n, 3n，使其按顺序播放。
4. 如果要无限循环播放，可以参考以下答案使用一些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>

- m4n0