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

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?

enter image description here

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>

edited Dec 21 at 9:53

Roberrrt

5,5172143

asked Dec 21 at 9:10

Mithun Raikar

3,07693466

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 |

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?

enter image description here

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>

edited Dec 21 at 9:53

Roberrrt

5,5172143

asked Dec 21 at 9:10

Mithun Raikar

3,07693466

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 |

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?

enter image description here

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>

edited Dec 21 at 9:53

Roberrrt

5,5172143

asked Dec 21 at 9:10

Mithun Raikar

3,07693466

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?

enter image description here

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

edited Dec 21 at 9:53

Roberrrt

5,5172143

asked Dec 21 at 9:10

Mithun Raikar

3,07693466

edited Dec 21 at 9:53

Roberrrt

5,5172143

asked Dec 21 at 9:10

Mithun Raikar

3,07693466

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

asked Dec 21 at 9:10

Mithun Raikar

3,07693466

asked Dec 21 at 9:10

Mithun Raikar

3,07693466

asked Dec 21 at 9:10

Mithun Raikar

3,07693466

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

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

@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 there is a solution with CSS ;)
– Temani Afif
Dec 21 at 9:42

add a comment |

1 Answer
1

active

oldest

votes

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>

edited Dec 22 at 11:20

answered Dec 21 at 9:42

Temani Afif

64.5k93675

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 6 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');
});

Post as a guest

Name

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

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

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>

edited Dec 22 at 11:20

answered Dec 21 at 9:42

Temani Afif

64.5k93675

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 6 more comments

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>

edited Dec 22 at 11:20

answered Dec 21 at 9:42

Temani Afif

64.5k93675

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 6 more comments

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>

edited Dec 22 at 11:20

answered Dec 21 at 9:42

Temani Afif

64.5k93675

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>

edited Dec 22 at 11:20

answered Dec 21 at 9:42

Temani Afif

64.5k93675

edited Dec 22 at 11:20

answered Dec 21 at 9:42

Temani Afif

64.5k93675

answered Dec 21 at 9:42

Temani Afif

64.5k93675

answered Dec 21 at 9:42

Temani Afif

64.5k93675

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 6 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

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

@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

Awesome question. Awesome answer ! +1
– Allan Jebaraj
Dec 21 at 9:50

@MithunRaikar I added another example to explain how it works
– Temani Afif
Dec 21 at 10:00

|
show 6 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');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Cfxtrjtrk