CSS3 typewriter effect

Question

I have a CSS3 code here which has a typewriter effect.

What I want to do is to animate a line of <p></p> then erase it and then animate the next <p></p> . I already did it to the first line. But how can I erase the first then proceed to the next line.

Here is the code so far.

 .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

Based on your question, I assume that you are not looking for a natural typewriter effect but more on how to extend what you have already created to the 2nd, 3rd lines and also hide the first line when the second is animating and so on. If this is indeed the case, please read further.

Since you have to animate multiple elements but not at the same time, you need to add a delay. The delay for each element should be calculated such that all the prior elements would have finished their animation by the time the animation starts for the current one. So, for example, the first element would need no delay but the second would need 5s delay, the third would need 10s delay and so on. These delays can be applied to the elements by using the nth-child selectors like in the below snippet.

Finally, since you are looking for the previous lines to disappear when the next element is animating, the default/original width of the element should be 0 and should animate to 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

I would split your animation in 3 to add delays, then put all <p> same place and add a "hide" property to the animation:

.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

Edited for an infinite bucle (as a request from Khalil) you have to add infinite interaction count and twist a bit your animation times and sectors so the texts don't overlap.

As in this FIDDLE

Answer 3

you can try like this -

 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>