Hello guys in this tutorial we will create a text filling CSS animation using HTML & CSS.
Text–fill animation on hover is a type of text–animation of modern web design concepts. In this animation, the text is filled with a color different from that of the original text-color in a particular direction i.e. left to right, right to left, top to bottom, or bottom to top.
First we need to create two files index.html and style.css then we need to do code for it.
Step:1
Add below code inside index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>How to create text fill animation using CSS ?</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta https-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
</head>
<body>
<div class="animated_text">
<h1 data-text="Stackfindover">Stackfindover</h1>
</div>
</body>
</html>
Step:2
Then we need to add code for style.css which code i provide in below screen.
* {
padding: 0;
margin: 0;
font-family: 'IBM Plex Sans', sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.animated_text {
position: relative;
}
h1 {
font-size: 80px;
font-weight: 800;
color: transparent;
-webkit-text-stroke: 0.2px #4b00ff;
}
h1:before {
content: attr(data-text);
position: absolute;
left: 0;
top: 0;
color: #4b00ff;
overflow: hidden;
width: 0%;
transition: 1.5s ease-in-out;
}
.animated_text > h1:hover:before {
width: 100%;
}
Hey !,
How do you do the same but with the filling coming from the bottom ?
Hey, Citadin, please check below codepen link for your query
https://codepen.io/stack-findover/pen/MWJMJZW
It is possible to create on multiple line
Please check it
https://codepen.io/stack-findover/pen/MWJMJZW
is it possible to fill text once and automatically from left to right? thanks