Typing effect for multiple lines

Question

I am trying to add typing effect to my paragraph. I found this nice link It works nicely for one line text. But what I am trying to reach is a paragraph with multiple lines.

white-space:nowrap;

this css makes the text into one line, but without that nowrap, the effect looks weird. Anyone has an idea?
JSFiddle HTML:

<div class="css-typing">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>

CSS:

.css-typing {
    width: 200px;
    white-space:nowrap;
    overflow:hidden;
    -webkit-animation: type 2s steps(50, end);
    animation: type 5s steps(50, end);
}

@keyframes type {
    from { width: 0; }
}

@-webkit-keyframes type {
    from { width: 0; }
}

Answer 1

this might be what you are looking for

Fiddle

var spans = '<span>' + str.split('').join('</span><span>') + '</span>';
$(spans).hide().appendTo('.css-typing').each(function (i) {
    $(this).delay(100 * i).css({
        display: 'inline',
        opacity: 0
    }).animate({
        opacity: 1
    }, 100);
});

play around with the duration settings

Answer 2

I had the same issue finally got it working with pure css here is the source code for 3 lines but its easy to extend to as many as you would like. the important lines are adding the animation delay, next animation fill mode forward is important because I set opacity to 0 so line would disappear with out it after each animation is done, finally in @keyframes type2 and 3 going from opacity 0 to 1 with 1% at 1 make it look like it not fading in. I am no CSS expert but hope this helps someone in the future.

.css-typing
{   
    font-family: "Courier";
    font-size: 14px;
    width: 50em;
    white-space:nowrap;
    overflow:hidden;
    -webkit-animation: type 5s steps(40, end);
    animation: type 5s steps(40, end);
}

.css-typing:nth-child(2)
{
    white-space:nowrap;
    overflow:hidden;    
    opacity:0;
    -webkit-animation: type 5s steps(40, end);
    animation: type2 5s steps(40, end);
    -webkit-animation-delay: 5s; 
    animation-delay: 5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
.css-typing:nth-child(3){
    white-space:nowrap;
    overflow:hidden;
    opacity:0;
    -webkit-animation: type 5s steps(40, end);
    animation: type3 5s steps(40, end);
    -webkit-animation-delay: 10s; 
    animation-delay: 10s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

 @keyframes type{
    from { width: 0; }
}

@-webkit-keyframes type{
    from { width: 0; }
}

span{
  animation: blink 1s infinite;
}

@keyframes type2{
0%{width: 0;}
from {opacity:0;}
1%{opacity:1;}
to{opacity:1;}
100%{opacity:1;}
}
@-webkit-keyframes type2{
0%{width: 0;}
from {opacity:0;}
1%{opacity:1;}
to{opacity:1;}
100%{opacity:1;}
}  
@keyframes type3{
  0%{width: 0;}
  from {opacity:0;}
1%{opacity:1;}
to{opacity:1;}
100%{opacity:1;}

} 
@-webkit-keyframes type3{
  0%{width: 0;}
  from {opacity:0;}
1%{opacity:1;}
to{opacity:1;}
100%{opacity:1;}
}  

Answer 3

Full CSS Multiple line type effect with a caret and with different delays and speed as example.

Codepen Example: css typing multiple line https://codepen.io/Bojoer/pen/EZYgeO

<div class="css-typing">
  <p>
    Typed text 1
  </p>
  <p>
    Typed text 2
  </p>
  <p>
    Typed text 3
  </p>
</div>

<style>
.css-typing p {
  font-family: "Courier";
  font-size: 14px;
  width: 7.3em;
  white-space: nowrap;
  overflow: hidden;
  -webkit-animation: type 2s steps(40, end);
  animation: type 2s steps(40, end);
  border-right: .15em solid orange;
}

.css-typing p:nth-child(2) {
  white-space: nowrap;
  overflow: hidden;
  opacity: 0;
  -webkit-animation: type 2s steps(40, end);
  animation: type2 2s steps(40, end);
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.css-typing p:nth-child(3) {
  white-space: nowrap;
  overflow: hidden;
  opacity: 0;
  -webkit-animation: type 5s steps(40, end);
  animation: type3 5s steps(40, end);
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@keyframes type {
  from {
    width: 0;
  }
}

@-webkit-keyframes type {
  from {
    width: 0;
  }
}

span {
  animation: blink 1s infinite;
}

@keyframes type2 {
  0% {
    width: 0;
  }
  from {
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  to {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes type2 {
  0% {
    width: 0;
  }
  from {
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  to {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes type3 {
  0% {
    width: 0;
  }
  from {
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  to {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes type3 {
  0% {
    width: 0;
  }
  from {
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  to {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
</style>