How to Achieve a Text Loading Animation Over Multiple Lines

How can I achieve a text loading animation over multiple lines?

An idea is to consider gradient coloration with background-clip: text applied to an inline element.

body {
  background: #3498db;
  font-family: sans-serif;
}

h1 {
  font-size: 5em;
}

h1 span {
  background:
    linear-gradient(#fff,#fff) left no-repeat
    rgba(0, 0, 0, .3);
  background-size:0% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation:loading 5s forwards linear;
}

@keyframes loading {
  to {
    background-size:100% 100%;
  }
}

<h1><span>Suspendisse mollis dolor vitae porta egestas. Nunc nec congue odio.</span></h1>

CSS loads animations on multiple lines at the same time

Basically you can do that by checking whether the CSS3 Animation has ended or not like explained in this link

http://blog.teamtreehouse.com/using-jquery-to-detect-when-css3-animations-and-transitions-end

then create a function to apply the animation class and call it on jQuery ready, inside the function when the animation ended, check whether there's still another line of sentences that want to be animated

Here's the updated code that should work like what you wanted it to be

nb: this will work only if the sentences is only one line, and if it's more, you must separate it in another element like in the example, also the alert in the end is only to show that the function to animate the typing will not start anymore

nb2: I forgot that the question doesn't include the JavaScript or jQuery tag, but I hope this could help if by chance someone else needed to use the jQuery

var $typeAnimation;$(function(){  $typeAnimation = $(".view").first();  if($typeAnimation.size() > 0) {    startAnimation();  }});
function startAnimation() {  $typeAnimation.addClass("animate");  $typeAnimation.one('webkitAnimationEnd oanimationend msAnimationEnd animationend',     function(e) {    $typeAnimation = $typeAnimation.next(".view");    if($typeAnimation.size() > 0) {      startAnimation();    } else {      alert("No More Sentence to be animated");    }  });}

body{ background: #000; color: lime;}.view {    display: none;}.view.animate{    display: block; font-size: 14px; margin: 30px; white-space:nowrap; overflow: hidden; width: 30em; animation: type 5s steps(50, end) 1; }@keyframes type{ from{ width: 0;}}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script><div class="view">Supercalifragilisticexpialidocious</div><div class="view">Another sentence...</div><div class="view">Yet Another sentences...</div><div class="view">And Also Another Final sentence...</div>

pseudo element across multiple lines to create a continuous underline animation

Use gradient like below:

body {  padding: 20px;  font-family: Helvetica;}
a {  font-weight: bold;  color: black;  position: relative;  text-decoration: none;  background:linear-gradient(#000,#000) left bottom no-repeat;  background-size:0% 2px;  transition: all 0.5s;}
a:hover {  background-size:100% 2px;}/* this will give another kind of animation (all lines will animate at the same time)*/.alt {  -webkit-box-decoration-break:clone;          box-decoration-break:clone;}

<a href="">my link</a><br><br><a href="">this is<br>a much<br>longer link</a><br><br><a class="alt" href="">this is<br>a much<br>longer link</a>

Animation cuts off multiple lines of text in <p>

So if I have text in a single <p> element that covers 4 lines, only the top line gets shown.

Based on the above statement, I assume that the question is about text spanning multiple lines even when the maximum possible width is given to the element (that is, changing just the width is not an option).

As I had mentioned in my comment, the thing with animations like this is that if you remove the white-space: nowrap, it won't work like a typewriter effect because the full text will start getting typed at the same time (as only the width is being animated) and it will result in a weird animation because when the width is small the text will wrap-around and when it increases the text will also move to previous lines.

The text needs to be restricted to a single line or it should be split into multiple p tags like in the below snippet. If neither of these can be done then you should look at using JavaScript (or any library).

body {  background: #000;  padding-top: 10px;  width: 500px;  border: solid white 1px;}p {  color: lime;  font-family: "Courier";  font-size: 20px;  margin: 10px 0 0 10px;  white-space: nowrap;  overflow: hidden;  width: 0;  animation: type 4s steps(60, end) forwards;}p:nth-child(2) {  animation-delay: 4s;}p:nth-child(3) {  animation-delay: 8s;}p a {  color: lime;  text-decoration: none;}span {  animation: blink 1s infinite;}@keyframes type {  to {    width: 100%;  }}@keyframes blink {  to {    opacity: .0;  }}::selection {  background: black;}

<p>hi folks, this is typing animation using</p><p>CSS. But on the second line it never</p><p>shows up. The other lines get cut off.</p>

CSS3: Lines of text sliding into page at different times

Just add opacity: 0; to the initial element and opacity: 1; to the animation.
However, you need to retain the opacity after the animation ends. So the animation-fill-mode: forwards; comes to help.

Update: using transform: translate(100%); thanks to @Luca Detomi

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

<!DOCTYPE html><html><script src="http://leaverou.github.com/prefixfree/prefixfree.min.js"></script>
<head><style>
h1 {  animation-name: slidein;  animation-duration: 2s;  animation-timing-function: ease-in-out;  animation-fill-mode: forwards;  color: red;  font-size: 3.5em;  font-family: Arial;  font-weight:bold;  opacity: 0;}
@keyframes slidein {  0%   { transform: translate(101%); opacity:1; }  100% { transform: translate(0%); opacity:1;}}
</style></head><body>
<h1 style="animation-delay: 0s;">ONE</h1><h1 style="animation-delay: 1s;">TWO</h1><h1 style="animation-delay: 3s;">THREE</h1>
</body></html>