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; }
}
white-space:nowrapall the text is not in a single line, so thetypingeffect can't be achieved. so you'll need to increase the width of the.css-typingelement to a substantial amount in case you are usingwhite-space:nowrap. it doesn't look like it has support for typing a new line . try jsfiddle.net/Dd6ht/5nowrap). 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.