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

  • A+
Category:Languages

I am trying to implement a text loading animation with 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 am 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?

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

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;         }     }
<h1 data-text="Suspendisse mollis dolor vitae porta egestas. Nunc nec congue odio.">Suspendisse mollis dolor vitae porta egestas. Nunc nec congue odio.</h1>

 


An idea is to consider gradient coloration with an inline element. Simply pay attention to browser support of background-clip: text

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%;   background-clip: text;   color: transparent;   -webkit-background-clip: text;   -webkit-text-fill-color: transparent;   animation:loading 5s forwards linear; }  @keyframes loading {   100% {     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.

Comment

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: