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

Question

I'm trying to implement a text loading animation using only CSS. 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.
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.
How can I fix this?
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;
}
}
<h1 data-text="Suspendisse mollis dolor vitae porta egestas. Nunc nec congue odio.">Suspendisse mollis dolor vitae porta egestas. Nunc nec congue odio.</h1>

Answer 1

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>
To better understand how it works, here is a basic example where you can see how inline element behave with background coloration and how its different from block level element:
.color {
font-size: 1.5em;
line-height: 1.5em;
border: 2px solid;
background: linear-gradient(red, red) left no-repeat;
background-size: 0% 100%;
animation: change 5s linear forwards;
}
#keyframes change {
100% {
background-size: 100% 100%
}
}
<span class="color">
lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume
</span>
<div class="color">
lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume
</div>
I simply apply the same logic using background-clip:text to color the text instead of the background:
.color {
font-size: 1.5em;
line-height: 1.5em;
border: 2px solid;
background: linear-gradient(red, red) left no-repeat;
background-size: 0% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
animation: change 5s linear forwards;
}
#keyframes change {
100% {
background-size: 100% 100%
}
}
<span class="color">
lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume
</span>
<div class="color">
lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume
</div>