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  then erase it and then animate the next . 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>

For a better writing effect you can refer this [**SOAnswer**](http://stackoverflow.com/questions/32166196/css-handwriting-animation/32166370#32166370) — vivekkupadhyay, Sep 17 '15 at 09:05
It's not possible with CSS. You need javascript to split the string in characters and then print char by char with a timeout. — Marcos Pérez Gude, Sep 17 '15 at 09:06
You might want to check out https://stackoverflow.com/a/57887588/2397550. — Mr. Hugo, Sep 12 '19 at 11:41

score 4 · Answer 1 · answered Sep 17 '15 at 09:15

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>

Alvaro Menéndez · Answer 2 · 2017-01-10T14:14:59.353

2

I would split your animation in 3 to add delays, then put all 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

edited Jan 10 '17 at 14:14

answered Sep 17 '15 at 09:16

Alvaro Menéndez

8,766
3
37
57

Nice one. I didn't think of an over-writing kind of effect :) – Harry Sep 17 '15 at 10:08
Ty. only reason I didn't delete my answer (yours is better and shorter code) when you beated me posting it for like 20 seconds :) – Alvaro Menéndez Sep 17 '15 at 10:19
20 seconds is a very short time mate. I don't think you should have deleted even if it was the exact same. The community would realize that neither of us had a chance to copy so quickly :) – Harry Sep 17 '15 at 10:22
Is there a way to repeat the typing and erasing? as at the end it stops, Thank you – Khalil Jan 06 '17 at 07:31
I edited my answer with a second fiddle for infinite bucle – Alvaro Menéndez Jan 10 '17 at 14:18

score 2 · Accepted Answer · answered Sep 17 '15 at 09:16

2

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>

answered Sep 17 '15 at 09:16

Mukul Kant

7,074
5
38
53

@KimCarlo: Seriously you were looking for a solution with 3 different animations and also one where the last line animates first? – Harry Sep 17 '15 at 11:43
2

Your own words " a line of
then ERASE it and then animate the next"... and then you mark as right the last answer and the incomplete one :) – Alvaro Menéndez Sep 17 '15 at 11:56

CSS3 typewriter effect

3 Answers3