Html CSS动画中的顺序文本

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

。自动打字{
溢出：隐藏；
空白：nowrap；
}
1.复写{
动画：自动键入8s步骤（10，结束）；
动画迭代次数：无限；
}
@关键帧自动打字{
从{
宽度：0px；
}
}
@关键帧自动打字{
0% {
宽度：0px；
}
20% {
宽度：70px；
}
40% {
宽度：140px；
}
60% {
wdith:210px；
}
80%. {
宽度：280px；
}
100% {
宽度：500px；
}
}
.alignone{
高度：20px；
宽度：50px；
位置：相对位置；
顶部：4px；
}

。
你好，欢迎来到这里
随便看看

浏览网站，并通过联系人页面上的表单与我们联系

，因为CSS无法检测字符，我建议您

将行包装在单独的类

autotype1

、

autotype2

和

autotype3

中

最初使用

宽度：0

或

不透明度：0隐藏其他行

与

2n，3n

等定时一起使用，使其连续

如果您想让它无限大，您可能需要在以下答案的帮助下添加一点JS：

。自动打字{
溢出：隐藏；
空白：nowrap；
}
1.复写{
动画：重新键入4s步骤（10，结束）；
动画填充模式：正向；
}
.自动类型2{
宽度：0；
动画延迟：4s；
页边距底部：0；
}
.自动类型3{
宽度：0；
动画延迟：8秒；
边际上限：0；
}
@关键帧自动打字{
从{
宽度：0px；
}
}
@关键帧自动打字{
0% {
宽度：0px；
}
20% {
宽度：70px；
}
40% {
宽度：140px；
}
60% {
宽度：210px；
}
80%. {
宽度：280px；
}
100% {
宽度：500px；
}
}
.alignone{
高度：20px；
宽度：50px；
位置：相对位置；
顶部：4px；
}

。
您好，欢迎光临
随便看看
浏览网站，并通过以下表格与我们联系


联系人页面上的