Text Fade-In and Fade-Out Animation Effect
☆ This is a free text fade-in and fade-out animation effect project. In this project, the text gradually fades in and fades in, and this CSS animation effect looks cool.
☆ The source code of this project is freely available on my website Free Projects1 or GitHub Profile.
<meta name="keywords" content="">
<meta name="description" content="">
☆ The above two lines are not necessary for the code, the code will run without them.
☆ These lines make our page efficient so that users can easily find our page on Google.
☆ The first line helps us to find any page and the second line tells about that page.
Project Source code
1.1 index file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Text FadeIn and FadeOut Animation Effect | Free Projects1 </title>
<meta name="keywords" content="text fadein and fadeout animation effect, text fade in and out css, text fade in after effects, text fade in, text animation effects after effects, fade in text in after effects, fade in and out text css, adobe animate fade in text, fade text after effects, fade in fade out text after effects, css text animation fade in and out, fade in fade out text animation css, css fadein animation, css animation fade in and fade out, fade in text effect css, fading text effect, fade text animation css, fade text in and out css, line text animation after effects, jquery fade text in and out, jquery animation fade in, javascript fade text, javascript fade animation, how to fade out text in after effects, make text fade in and out css, fade in and fade out after effects, smooth text animation after effects, unity text animation effects, animation fade in fade out, animation fade in and out css, unity fade animation, fade in text animation css, css animation text fade in, css animation fadein fadeout, css text fade in and out, freeprojects1">
<meta name="description" content="It is a Text FadeIn and FadeOut Animation Effect free project. In this project, text fade in and fade out slowly slowly and this css animation effect looks cool.">
<link rel="shortcut icon" href="favicon.png" type="image/x-icon">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2> Text FadeIn and FadeOut Animation Effect. </h2>
</body>
</html>
1.2 CSS file
@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800&display=swap");
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #000;
}
h2{
position: relative;
font-size: 4em;
color: #fff;
overflow: hidden;
}
h2:before{
content: '';
position: absolute;
left: 120%;
width: 120%;
height: 100%;
background: linear-gradient(90deg, transparent 0%, #000 5%, #000 100%);
/* background: #000; */
animation: animate 10s linear forwards infinite;
}
@keyframes animate{
0%{
left: -20%;
}
50%{
left: 120%;
}
100%{
left: -20%;
}
}
Please do not enter any spam link in the comment box.