CSS Text Filling Animation Effect
In this blog post, I will show you how to create a text filling animation using CSS. This is a simple and elegant effect that can add some flair to your website or app.
The basic idea is to use a linear gradient as the background of the text element, and then animate the background position to create the illusion of the text being filled with color.
To achieve this, we need to use some CSS properties and values that you may not be familiar with, such as background-clip, text-fill-color, and calc(). Let’s go through them one by one.
First, we need to set the background-clip property to text. This property specifies how the background image or color should be clipped to fit the content area of the element. By setting it to text, we are telling the browser to only apply the background to the text itself, not the whole element.
Second, we need to set the text-fill-color property to transparent. This property specifies the color of the text, and by making it transparent, we are allowing the background to show through.
Third, we need to set the background-image property to a linear gradient. This property specifies the image to use as the background of the element. A linear gradient is a smooth transition between two or more colors along a straight line. We can use any colors we want, but for this example, I will use a gradient from white to blue.
Fourth, we need to set the background-size property to 100% 200%. This property specifies the size of the background image relative to the element. By setting it to 100% 200%, we are making the background image twice as tall as the element, which means that only half of the gradient will be visible at a time.
Fifth, we need to set the background-position property to 0% 0%. This property specifies the position of the background image relative to the element. By setting it to 0% 0%, we are aligning the top of the background image with the top of the element, which means that only the white part of the gradient will be visible at first.
Finally, we need to add a keyframes animation that changes the background-position from 0% 0% to 0% 100%. This animation will move the background image downwards, revealing the blue part of the gradient and creating the filling effect.
Here is the complete CSS code for our text filling animation:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS animation with text filling effect </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="comingsoon-loading">
<h1 data-text="COMING-SOON">COMING-SOON</h1>
</div>
</body>
</html>
CSS
body{
background: rgb(212, 204, 204);
}
.comingsoon-loading {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.comingsoon-loading h1 {
position: absolute;
font-size: 25vh;
color: #a472d4;
-webkit-text-stroke: 2px black;
text-transform: uppercase;
}
.comingsoon-loading h1::before {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
color: black;
-webkit-text-stroke: 0px black;
border-right: 4px solid black;
overflow: hidden;
animation: animate 6s linear infinite;
}
/* animation to fill text */
@keyframes animate
{
0%,10%,100%
{
width: 0;
}
50%,70%
{
width: 100%;
}
}
For More Tutorials Please Click Here
