Question

我这里有一个CSS3代码，它具有打字机效果。

我想要做的是为行设置动画，然后将其删除，然后为下一个设置动画。我已经把它做到了第一行。但是如何删除第一行然后进入下一行。

到目前为止，这是代码。

.css-typing {
  width: 10em;
  white-space: nowrap;
  overflow: hidden;
  -webkit-animation: type 5s steps(50, end);
  animation: type 5s steps(50, end);
}
@keyframes type {
  from {
    width: 0;
  }
}
@-webkit-keyframes type {
  from {
    width: 0;
  }
}

<p class='css-typing'>To save their world</p>
<p class='css-typing'>They must come to ours</p>
<p class='css-typing'>Spongebob out of water</p>

Answer 1

根据您的问题，我假设您不是在寻找自然打字机效果，而是更多关于如何将您已经创建的内容扩展到第2行，第3行以及在第二行是动画时隐藏第一行等等。上。如果情况确实如此，请进一步阅读。

由于您必须同时为多个元素设置动画，因此需要添加延迟。应该计算每个元素的延迟，使得所有先前元素在动画开始时为当前元素完成动画。因此，例如，第一个元素不需要延迟，但第二个元素需要5秒延迟，第三个元素需要10秒延迟，依此类推。可以使用nth-child选择器将这些延迟应用于元素，如下面的代码段所示。

最后，由于您在下一个元素动画时要查找前一行消失，因此该元素的默认/原始宽度应为0，并且应该设置为10em。

＆＃13;

.css-typing {
  width: 0;
  white-space: nowrap;
  overflow: hidden;
}
@keyframes type {
  to {
    width: 10em;
  }
}
@-webkit-keyframes type {
  to {
    width: 10em;
  }
}

p{
  -webkit-animation: type 5s steps(50, end);
  animation: type 5s steps(50, end);
}
p:nth-child(2){
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}
p:nth-child(3){
  -webkit-animation-delay: 10s;
  animation-delay: 10s;
}

＆＃13;

<p class='css-typing'>To save their world</p>
<p class='css-typing'>They must come to ours</p>
<p class='css-typing'>Spongebob out of water</p>

＆＃13;

Answer 2

我会将你的动画拆分为3以添加延迟，然后将所有相同的位置添加一个＆＃34;隐藏＆＃34;属性到动画：

.container {position:relative;}
.css-typing {
  width: 10em;
  white-space: nowrap;
  overflow: hidden;
  opacity:0;
  position:absolute;
  top:0;
  left:0;
}
.x1 {animation: type1 5s steps(50, end);}
@keyframes type1 {
    0% {width: 0; opacity:1}
    99% {width: 10em; opacity:1}  
    100% {opacity:0;}
}
.x2 {
    animation: type2 5s steps(50, end);
    animation-delay:5s;
}
@keyframes type2 {
    0% {width: 0; opacity:1}
    99% {width: 10em; opacity:1}  
    100% {opacity:0;}
}
.x3 {
    animation: type3 5s steps(50, end);
    animation-delay:10s;
}
@keyframes type3 {
    0% {width: 0; opacity:1}
    99% {width: 10em; opacity:1}  
    100% {opacity:0;}
}

<强> JSFIDDLE

编辑以获取无限的bucle（作为来自Khalil的请求）您必须添加infinite互动计数并稍微扭曲一下您的动画时间和扇区，以便文本不会被删除重叠。

与此 FIDDLE

一样

Answer 3

你可以这样试试 -

p{
  color: #000; 
  
  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 4s steps(30, end);
}

p:nth-child(3){
  animation: type3 6s steps(60, end);
}


@keyframes type{ 
  from { width: 0; } 
} 

@keyframes type2{
  0%{width: 0;}
  50%{width: 0;}
  100%{ width: 100; } 
} 

@keyframes type3{
  0%{width: 0;}
  50%{width: 0;}
  100%{ width: 100; } 
}

<p class='css-typing'>To save their world</p>
<p class='css-typing'>They must come to ours</p>
<p class='css-typing'>Spongebob out of water</p>

CSS3打字机效果

3 个答案: