Menu
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>
561
The correct way to do things is using things made for the things you need. If you want a line break (enter), use <br> ; If you want to define a paragraph, use <p> . Show activity on this post. According to this, the <br> element is used to insert a line break without starting a new paragraph.
These Loading text animations in css are certain to take you one step ahead of the competition! When you begin your search for text animations for CSS, you are guaranteed to find a few things. There are some questionable animations and some breathtaking ones. The real fun is exploring available options and letting them serve as inspiration.
Apply the typing animation for the first line by adding the following CSS code snippet into your project. Similarly, target the second line by using CSS + (element just after the element) selector.
So, define the CSS keyframes for these animations just like below code: Now set relative position for the (p that has the class name “type”) paragraphs. Keep its overflow hidden and break the words using CSS word-break property. Here, the other properties like line-height, width, etc are optional.
Loading animations are a great way to give visual feedback when a user is waiting for some action to finish. In this tutorial, we will learn one method of animating text up and down like a wave to act as a loading animation.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
