CSS3打字机效果

Question

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

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

这是迄今为止的代码。

 .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的动画。

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

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

我会将你的动画拆分为3以添加延迟，然后将所有<p>相同的位置添加到动画中的“隐藏”属性：

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