How can I achieve a CSS text loading animation over multiple lines?
22
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?
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>html css css3 css-animations
edited Dec 21 at 9:53
Roberrrt
5,5172143
asked Dec 21 at 9:10
Mithun Raikar
3,06693466
add a comment |
22
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?
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>html css css3 css-animations
edited Dec 21 at 9:53
Roberrrt
5,5172143
asked Dec 21 at 9:10
Mithun Raikar
3,06693466
1
Hi! Great question, is CSS only mandatory? Since I believe this is impossible with mere CSS because you're animating the width of the tag. Line breaks will always break this format.
– Roberrrt
Dec 21 at 9:18
1
@Roberrrt hi, i'm only trying to reduce the effort of writing more code. i think css should have the other way around... i'm even trying other possibilities. and also considering that javascript can be disabled by browser.
– Mithun Raikar
Dec 21 at 9:21
1
@Roberrrt there is a solution with CSS ;)
– Temani Afif
Dec 21 at 9:42
add a comment |
22
22
22
3
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?
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>html css css3 css-animations
edited Dec 21 at 9:53
Roberrrt
5,5172143
asked Dec 21 at 9:10
Mithun Raikar
3,06693466
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?
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> 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> 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>html css css3 css-animations
html css css3 css-animations
edited Dec 21 at 9:53
Roberrrt
5,5172143
asked Dec 21 at 9:10
Mithun Raikar
3,06693466
edited Dec 21 at 9:53
Roberrrt
5,5172143
asked Dec 21 at 9:10
Mithun Raikar
3,06693466
edited Dec 21 at 9:53
Roberrrt
5,5172143
edited Dec 21 at 9:53
Roberrrt
5,5172143
edited Dec 21 at 9:53
Roberrrt
5,5172143
5,5172143
asked Dec 21 at 9:10
Mithun Raikar
3,06693466
asked Dec 21 at 9:10
Mithun Raikar
3,06693466
asked Dec 21 at 9:10
Mithun Raikar
3,06693466
3,06693466
1
Hi! Great question, is CSS only mandatory? Since I believe this is impossible with mere CSS because you're animating the width of the tag. Line breaks will always break this format.
– Roberrrt
Dec 21 at 9:18
1
@Roberrrt hi, i'm only trying to reduce the effort of writing more code. i think css should have the other way around... i'm even trying other possibilities. and also considering that javascript can be disabled by browser.
– Mithun Raikar
Dec 21 at 9:21
1
@Roberrrt there is a solution with CSS ;)
– Temani Afif
Dec 21 at 9:42
add a comment |
1
Hi! Great question, is CSS only mandatory? Since I believe this is impossible with mere CSS because you're animating the width of the tag. Line breaks will always break this format.
– Roberrrt
Dec 21 at 9:18
1
@Roberrrt hi, i'm only trying to reduce the effort of writing more code. i think css should have the other way around... i'm even trying other possibilities. and also considering that javascript can be disabled by browser.
– Mithun Raikar
Dec 21 at 9:21
1
@Roberrrt there is a solution with CSS ;)
– Temani Afif
Dec 21 at 9:42
1
1
Hi! Great question, is CSS only mandatory? Since I believe this is impossible with mere CSS because you're animating the width of the tag. Line breaks will always break this format.
– Roberrrt
Dec 21 at 9:18
Hi! Great question, is CSS only mandatory? Since I believe this is impossible with mere CSS because you're animating the width of the tag. Line breaks will always break this format.
– Roberrrt
Dec 21 at 9:18
1
1
@Roberrrt hi, i'm only trying to reduce the effort of writing more code. i think css should have the other way around... i'm even trying other possibilities. and also considering that javascript can be disabled by browser.
– Mithun Raikar
Dec 21 at 9:21
@Roberrrt hi, i'm only trying to reduce the effort of writing more code. i think css should have the other way around... i'm even trying other possibilities. and also considering that javascript can be disabled by browser.
– Mithun Raikar
Dec 21 at 9:21
1
1
@Roberrrt there is a solution with CSS ;)
– Temani Afif
Dec 21 at 9:42
@Roberrrt there is a solution with CSS ;)
– Temani Afif
Dec 21 at 9:42
add a comment |
1 Answer
1
active
oldest
votes
20
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%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
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:
.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>answered Dec 21 at 9:42
Temani Afif
64.3k93675
3
I've been playing around with this and I applaud you, this works brilliantly!
– Roberrrt
Dec 21 at 9:43
Thanks a lot buddy ;) that really reduced my effort for writing a JS
– Mithun Raikar
Dec 21 at 9:45
2
@Roberrrt it's all about the inline element .. unlike block level element, the coloration is not made to the whole block but to each line ... it's like you have a long continous line that you cut but they are still linked. Check this with border and you will understand : jsfiddle.net/xf73yg9u .. then I apply the same logic with background making only the text colored
– Temani Afif
Dec 21 at 9:49
4
Awesome question. Awesome answer ! +1
– Allan Jebaraj
Dec 21 at 9:50
1
@MithunRaikar I added another example to explain how it works
– Temani Afif
Dec 21 at 10:00
|
show 5 more comments
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53881960%2fhow-can-i-achieve-a-css-text-loading-animation-over-multiple-lines%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
20
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%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
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:
.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>answered Dec 21 at 9:42
Temani Afif
64.3k93675
3
I've been playing around with this and I applaud you, this works brilliantly!
– Roberrrt
Dec 21 at 9:43
Thanks a lot buddy ;) that really reduced my effort for writing a JS
– Mithun Raikar
Dec 21 at 9:45
2
@Roberrrt it's all about the inline element .. unlike block level element, the coloration is not made to the whole block but to each line ... it's like you have a long continous line that you cut but they are still linked. Check this with border and you will understand : jsfiddle.net/xf73yg9u .. then I apply the same logic with background making only the text colored
– Temani Afif
Dec 21 at 9:49
4
Awesome question. Awesome answer ! +1
– Allan Jebaraj
Dec 21 at 9:50
1
@MithunRaikar I added another example to explain how it works
– Temani Afif
Dec 21 at 10:00
|
show 5 more comments
20
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%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
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:
.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>answered Dec 21 at 9:42
Temani Afif
64.3k93675
3
I've been playing around with this and I applaud you, this works brilliantly!
– Roberrrt
Dec 21 at 9:43
Thanks a lot buddy ;) that really reduced my effort for writing a JS
– Mithun Raikar
Dec 21 at 9:45
2
@Roberrrt it's all about the inline element .. unlike block level element, the coloration is not made to the whole block but to each line ... it's like you have a long continous line that you cut but they are still linked. Check this with border and you will understand : jsfiddle.net/xf73yg9u .. then I apply the same logic with background making only the text colored
– Temani Afif
Dec 21 at 9:49
4
Awesome question. Awesome answer ! +1
– Allan Jebaraj
Dec 21 at 9:50
1
@MithunRaikar I added another example to explain how it works
– Temani Afif
Dec 21 at 10:00
|
show 5 more comments
20
20
20
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%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
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:
.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>answered Dec 21 at 9:42
Temani Afif
64.3k93675
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%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
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:
.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>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 {
100% {
background-size:100% 100%;
}
}<h1><span>Suspendisse mollis dolor vitae porta egestas. Nunc nec congue odio.</span></h1>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 {
100% {
background-size:100% 100%;
}
}<h1><span>Suspendisse mollis dolor vitae porta egestas. Nunc nec congue odio.</span></h1>.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>.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>.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>.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>answered Dec 21 at 9:42
Temani Afif
64.3k93675
edited 2 days ago
answered Dec 21 at 9:42
Temani Afif
64.3k93675
answered Dec 21 at 9:42
Temani Afif
64.3k93675
answered Dec 21 at 9:42
Temani Afif
64.3k93675
64.3k93675
3
I've been playing around with this and I applaud you, this works brilliantly!
– Roberrrt
Dec 21 at 9:43
Thanks a lot buddy ;) that really reduced my effort for writing a JS
– Mithun Raikar
Dec 21 at 9:45
2
@Roberrrt it's all about the inline element .. unlike block level element, the coloration is not made to the whole block but to each line ... it's like you have a long continous line that you cut but they are still linked. Check this with border and you will understand : jsfiddle.net/xf73yg9u .. then I apply the same logic with background making only the text colored
– Temani Afif
Dec 21 at 9:49
4
Awesome question. Awesome answer ! +1
– Allan Jebaraj
Dec 21 at 9:50
1
@MithunRaikar I added another example to explain how it works
– Temani Afif
Dec 21 at 10:00
|
show 5 more comments
3
I've been playing around with this and I applaud you, this works brilliantly!
– Roberrrt
Dec 21 at 9:43
Thanks a lot buddy ;) that really reduced my effort for writing a JS
– Mithun Raikar
Dec 21 at 9:45
2
@Roberrrt it's all about the inline element .. unlike block level element, the coloration is not made to the whole block but to each line ... it's like you have a long continous line that you cut but they are still linked. Check this with border and you will understand : jsfiddle.net/xf73yg9u .. then I apply the same logic with background making only the text colored
– Temani Afif
Dec 21 at 9:49
4
Awesome question. Awesome answer ! +1
– Allan Jebaraj
Dec 21 at 9:50
1
@MithunRaikar I added another example to explain how it works
– Temani Afif
Dec 21 at 10:00
3
3
I've been playing around with this and I applaud you, this works brilliantly!
– Roberrrt
Dec 21 at 9:43
I've been playing around with this and I applaud you, this works brilliantly!
– Roberrrt
Dec 21 at 9:43
Thanks a lot buddy ;) that really reduced my effort for writing a JS
– Mithun Raikar
Dec 21 at 9:45
Thanks a lot buddy ;) that really reduced my effort for writing a JS
– Mithun Raikar
Dec 21 at 9:45
2
2
@Roberrrt it's all about the inline element .. unlike block level element, the coloration is not made to the whole block but to each line ... it's like you have a long continous line that you cut but they are still linked. Check this with border and you will understand : jsfiddle.net/xf73yg9u .. then I apply the same logic with background making only the text colored
– Temani Afif
Dec 21 at 9:49
@Roberrrt it's all about the inline element .. unlike block level element, the coloration is not made to the whole block but to each line ... it's like you have a long continous line that you cut but they are still linked. Check this with border and you will understand : jsfiddle.net/xf73yg9u .. then I apply the same logic with background making only the text colored
– Temani Afif
Dec 21 at 9:49
4
4
Awesome question. Awesome answer ! +1
– Allan Jebaraj
Dec 21 at 9:50
Awesome question. Awesome answer ! +1
– Allan Jebaraj
Dec 21 at 9:50
1
1
@MithunRaikar I added another example to explain how it works
– Temani Afif
Dec 21 at 10:00
@MithunRaikar I added another example to explain how it works
– Temani Afif
Dec 21 at 10:00
|
show 5 more comments
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53881960%2fhow-can-i-achieve-a-css-text-loading-animation-over-multiple-lines%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Hi! Great question, is CSS only mandatory? Since I believe this is impossible with mere CSS because you're animating the width of the tag. Line breaks will always break this format.
– Roberrrt
Dec 21 at 9:18
1
@Roberrrt hi, i'm only trying to reduce the effort of writing more code. i think css should have the other way around... i'm even trying other possibilities. and also considering that javascript can be disabled by browser.
– Mithun Raikar
Dec 21 at 9:21
1
@Roberrrt there is a solution with CSS ;)
– Temani Afif
Dec 21 at 9:42