Codeconvey
  • Home
  • Tutorials
    • CSS Slideshow
    • CSS Navigation
    • Modal & Popup
    • Hover Effects
    • HTML Forms
    • Layout
  • CSS Animation
  • How To
  • Resources
No Result
View All Result
Codeconvey
No Result
View All Result

Animated Text Fill Animation in CSS

Muhammad Asif by Muhammad Asif
April 26, 2022
in CSS Animation
0
Animated Text Fill Animation in CSS
0
SHARES
0
VIEWS
Share on FacebookShare on Twitter

Nowadays, the trend of creating and using text animation is growing like wildfire. Every designer tries to design something amazing by applying different effects and animations to text. I have already covered many text animations and today I again come back with a new animation idea to make the fill text animated using CSS.

The idea for fill text animation came from an animated progress bar in which tilted lines move from one direction to another. Though the idea is simple, but the completion of the project was a little bit challenging. Thanks to CSS webkit-text-fill-color property which simplified the trick to make fill text.

Before getting started with coding, I would suggest you check out the demo page to see how animation works. There you can see the movement of linear-gradient colors filled inside the text. The text background, shadow, and size can be customized according to your needs. So, let’s get started with HTML to create this awesome text animation.

The HTML Structure

In HTML, create a div element with a class name "animated-txt" and place your text inside the p tag wrapping with a span element. So, the complete HTML code for the animated fill text is as follows:

<div class="animated-txt">
<p><span>You Text Goes Here...</span></p>
</div>

You can place the above HTML anywhere on your webpage where you wanted to create animated text.

CSS Styles for Animated Fill Text

The "animated-txt" is the wrapper element for the animated text. Define its background, font, color, and margin as mentioned below. Here the important property is min-height which you need to define according to the height of the text. In my case, I used a 400px minimum height of the wrapper element. You can increase or decrease it as per your requirements.

.animated-txt {
  background: #414141;  /* fallback for old browsers */
  font: 400 1em/1.5 "Neuton"; 
  color: rgba(255,255,255,.25); text-align: center; 
  margin: 0 auto;
  min-height: 400px;
  }

After that, target the p element which holds the text outside the fill text. Basically, the following styles for the p element are optional. It’s upon you if you wanna take up these styles. You can also change these CSS values to get the desired result for the p element.

.animated-txt p{
	text-transform: uppercase;
	letter-spacing: .5em;
	display: inline-block;
	border: 4px double rgba(255,255,255,.25);
	border-width: 4px 0;
	padding: 1.5em 0em;
	position: absolute;
	top: 20%;
	left: 50%;
	width: 40em;
	margin: 0 0 0 -20em;
}

Now, select the span element of the animated-txt wrapper in order to style the fill text. Define the font, letter-spacing, padding, and text-shadow property as described below. Use the margin property with 0 auto value to make the text alignment to the center of its parent element.

You can use a background image or gradient color to fill the text. To do so, we’ll use the CSS clip background technique to fill the characters. Similarly, we’ll transfer the text into 3d translation to activate hardware acceleration for smoother animation. So, the following are the styles for the fill text.

.animated-txt p span {
	font: 700 4em/1 "Oswald", sans-serif;
	letter-spacing: 0;
	padding: .25em 0 .325em;
	display: block;
	margin: 0 auto;
	text-shadow: 0 0 80px rgba(255,255,255,.5);

/* Clip Background Image */

	/*background: url(https://f.cl.ly/items/010q3E1u3p2Q0j1L1S1o/animated_text_fill.png) repeat-y;*/
  background-size: 50px 50px;
background-color: #c16;
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                  transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                  transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                  transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                  transparent 75%, transparent);
background-image: linear-gradient(135deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                  transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                  transparent 75%, transparent);
	-webkit-background-clip: text;

/* Animate Background Image */

	-webkit-text-fill-color: transparent;
	-webkit-animation: aitf 10s linear infinite;

/* Activate hardware acceleration for smoother animations */

	-webkit-transform: translate3d(0,0,0);
	-webkit-backface-visibility: hidden;
}

Finally, define the CSS keyframes for moving tilted lines inside the text. You can also specify other keyframes to bring change in the text according to your needs.

/* Animate Background Image */

@-webkit-keyframes aitf {
	0% { background-position: 0% 50%; }
	100% { background-position: 100% 50%; }
}

That’s all! I hope you have successfully created animated fill text animation. If you have any questions or suggestions, let me know by comment below.

Tags: Text Effect
Demo Download
Previous Post

CSS Animated Gradient Background Generator

Next Post

Text Wave Effect in CSS Only

Next Post
Text Wave Effect in CSS Only

Text Wave Effect in CSS Only

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Subscribe More Tutorials

Subscribe to our mailing list to receives monthly updates direct to your inbox!

You might also like

CSS Flip Animation on Hover – Flipping Card

CSS Flip Animation on Hover – Flipping Card

January 7, 2020
CSS Percentage Circle

Pure CSS Percentage Circle With Animation

January 21, 2023
CSS Glow Button Hover Effect

Pure CSS Button Shine/Glow Effect on Hover

December 23, 2019
Easy to Apply CSS Image Hover Transition Effects

CSS Image Hover Transition Effects

December 5, 2019
Codeconvey

© 2023 Codeconvey.com - All rights reserved.

Navigate Site

  • Home
  • About Us
  • Contact us
  • License
  • Disclaimer
  • DMCA
  • Terms & Conditions

Follow Us

No Result
View All Result
  • Home
  • CSS Animation
  • CSS Navigation
  • HTML Forms
  • Hover Effects
  • CSS Slideshow
  • Layout
  • Modal & Popup
  • How To
  • Resources

© 2023 Codeconvey.com - All rights reserved.