The fading text animation effect is one of the most demanding effects on UI/UX designing. This effect can be achieved by using HTML5 and CSS3. In the fading text effect, whenever we load the window, the text will slowly start disappearing. We can implement this effect using the animation property in CSS3.
HTML code: In this section, we will make the layout of the web-page.
- index.html
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
</head>
<body>
<div>
<h2>GeeksforGeeks</h2>
</div>
</body>
</html>
|
CSS code: In this section, we will add some CSS properties to create a fading text effect.
CSS
<style> * {
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: green;
animation-name: gfg;
animation-duration: 4s;
}
h2 {
position: relative;
margin: 0;
font-size: 5em;
font-weight: 750;
color: white;
z-index: 1;
overflow: hidden;
}
h2:before {
content: '';
position: absolute;
right: 130%;
width: 130%;
height: 100%;
background: linear-gradient(90deg,
transparent 0%, green 5%, green 100%);
animation: geeksforgeeks 5s linear backwards;
}
@keyframes geeksforgeeks {
from {
right: 130%
}
to {
right: -10%;
}
}
</style> |
Complete Code: In this section, we will combine the above two sections to create a fading text effect using HTML5 and CSS3.
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<style>
* {
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: green;
animation-name: gfg;
animation-duration: 4s;
}
h2 {
position: relative;
margin: 0;
font-size: 5em;
font-weight: 750;
color: white;
z-index: 1;
overflow: hidden;
}
h2:before {
content: '';
position: absolute;
right: 130%;
width: 130%;
height: 100%;
background: linear-gradient(90deg,
transparent 0%, green 5%, green 100%);
animation: geeksforgeeks 5s linear backwards;
}
@keyframes geeksforgeeks {
from {
right: 130%
}
to {
right: -10%;
}
}
</style>
</head>
<body>
<div>
<h2>GeeksforGeeks</h2>
</div>
</body>
</html>
|
Output: