4

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; }
}
3
  • its simple. you don't type in multiple lines at the same time. you remove the white-space:nowrap all the text is not in a single line, so the typing effect can't be achieved. so you'll need to increase the width of the .css-typing element to a substantial amount in case you are using white-space:nowrap. it doesn't look like it has support for typing a new line . try jsfiddle.net/Dd6ht/5
    – anurupr
    Apr 2, 2014 at 8:22
  • The approach using CSS animations proposed on the page you linked will not work with multi-line text, since it simply changes the width of the element used to display the text (and this is also why it needs nowrap). The JS plugin however seems to just append character by character to the text content element of the element, so it should not have that limitation.
    – CBroe
    Apr 2, 2014 at 8:30
  • @CBroe you are right. I probably have to look for other solution. Thanks
    – ishwr
    Apr 2, 2014 at 8:36
6

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;}
}  
1
  • This is pretty good, especially considering that you say you are not CSS expert! Now, you don't show a demo or HTML, but I'm guessing that one has to pre-determine where the line breaks are in the text, thereby limiting true responsive behavior, right? Still good...I guess this is as far as one could take it with CSS only...
    – CodeFinity
    Jan 25, 2016 at 20:30
5

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

2
  • it is a nice idea, but I am avoiding using jQuery only for this effect. But thanks
    – ishwr
    Apr 2, 2014 at 8:25
  • what does microsoft use for the animation? microsoft.com/net
    – juFo
    Aug 22, 2018 at 12:09
2

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.