title: How can I achieve a text loading animation over multiple lines?
body: <p>I'm trying to implement a text loading animation using only <code>CSS</code>. what I have is a text with black color, then when the page loads the text will fill start filling with a red color over several seconds.</p>
  <p>The issue I'm facing is that the text loading animation is working fine, but when the text ends and begins with a new line the animation text still continues on the same line.</p>
  <p>How can I fix this?</p>
  <p><a href="https://i.stack.imgur.com/6Uinz.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6Uinz.jpg" alt="CSS loading text" /></a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background: #3498db;
    font-family: sans-serif;
  }
  
  h1 {
    position: relative;
    color: rgba(0, 0, 0, .3);
    font-size: 5em;
    white-space: wrap;
  }
  
  h1:before {
    content: attr(data-text);
    position: absolute;
    overflow: hidden;
    max-width: 100%;
    white-space: nowrap;
    word-break: break-all;
    color: #fff;
    animation: loading 8s linear;
  }
  
  @keyframes loading {
    0% {
      max-width: 0;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1 data-text="Suspendisse mollis dolor vitae porta egestas. Nunc nec congue odio."&gt;Suspendisse mollis dolor vitae porta egestas. Nunc nec congue odio.&lt;/h1&gt;</code></pre>
  </div>
  </div>
  </p>