Welcome to Codingfizz,
Hello everyone, I will share how to create animated text using HTML and CSS in this article. And this article is part two of Text Animation.
Here is the first part of Text Animations: Text Animations Part 01
This article has four types of text animation:
- Text Reflection
- Text Sliding
- Text Typing
- Text Wave
I will use advanced CSS like Gradient functions (linear-gradient), Animation, Transform, Webkit, etc. But don't worry is not difficult.
First, we need to create two files in the text editor an HTML file (index.html) and a CSS file (style.css) for each text animation.
Text Reflection
To create this program Text Reflection. First, we need to create two files one is HTML with a .html extension and another is CSS with a .css extension.
HTML Code
The first file is an HTML file that name is index.html.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Text Reflection</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="text">
Codingfizz
</div>
</body>
</html>
CSS Code
The second file is a CSS file that name is style.css.
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
body{
font-family:'Roboto';
}
*{
margin: 0;
padding: 0;
}
html, body{
display: grid;
height: 100%;
place-items: center;
}
.text{
font-size: 40px;
font-weight: 700;
text-transform: uppercase;
font-family: 'Poppins', sans-serif;
margin-top: -50px;
letter-spacing: 7px;
color: #202020;
-webkit-box-reflect: below -30px linear-gradient(transparent, rgba(255,255,255,0.4));
}
Text Sliding
To create this program Text Sliding. First, we need to create two files one is HTML with a .html extension and another is CSS with a .css extension.
HTML Code
The first file is an HTML file that name is index.html.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Text Sliding</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="center slider">
Make
<div class="slide">
<div><div>Work</div></div>
<div><div>Lifestyle</div></div>
<div><div>Everything</div></div>
</div>
Awesome
</div>
</body>
</html>
CSS Code
The second file is a CSS file that name is style.css.
@import url('https://fonts.googleapis.com/css?family=Roboto:700');
body{
font-family:'Roboto';
}
*{
margin: 0;
padding: 0;
background: #042331;
}
.center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.slider{
color: #c1cbd7;
font-size: 36px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
}
.slide{
overflow: hidden;
height: 50px;
}
.slide div div{
display: inline-block;
color: white;
background: red;
padding: 4px 12px;
border-radius: 2px;
margin-bottom: 45px;
}
.slide div:nth-child(1){
animation: animate 5s linear infinite;
}
@keyfreames animate{
0%{margin-top: -270px;}
5%{margin-top: -180px;}
33%{margin-top: -180px;}
38%{margin-top: -90px;}
66%{margin-top: -90px;}
71%{margin-top: 0px;}
99.99%{margin-top: 0px;}
100%{margin-top: 270px;}
}
Text Typing
To create this program Text Typing. First, we need to create two files one is HTML with a .html extension and another is CSS with a .css extension.
HTML Code
The first file is an HTML file that name is index.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Texts Typing</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="static-txt">I'm a</div>
<ul class="dynamic-txts">
<li><span>Learner</span></li>
<li><span>Designer</span></li>
<li><span>Developer</span></li>
<li><span>Creator</span></li>
</ul>
</div>
</body>
</html>
CSS Code
The second file is a CSS file that name is style.css.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #343F4F;
}
.wrapper{
display: flex;
}
.wrapper .static-txt{
color: #fff;
font-size: 60px;
font-weight: 400;
}
.wrapper .dynamic-txts{
margin-left: 15px;
height: 90px;
line-height: 90px;
overflow: hidden;
}
.dynamic-txts li{
list-style: none;
color: #FC6D6D;
font-size: 60px;
font-weight: 500;
position: relative;
top: 0;
animation: slide 12s steps(4) infinite;
}
@keyframes slide {
100%{
top: -360px;
}
}
.dynamic-txts li span{
position: relative;
margin: 5px 0;
line-height: 80px;
}
.dynamic-txts li span::after{
content: "";
position: absolute;
left: 0;
height: 100%;
width: 100%;
background: #343F4F;
border-left: 2px solid #FC6D6D;
animation: typing 3s steps(10) infinite;
}
@keyframes typing {
40%, 60%{
left: calc(100% + 30px);
}
100%{
left: 0;
}
}
Text Wave
To create this program Text Wave. First, we need to create two files one is HTML with a .html extension and another is CSS with a .css extension.
HTML Code
The first file is an HTML file that name is index.html.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Text Wave</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wave">
<label>Ashish Kumar
</label>
</div>
<script>
const text = document.querySelectorAll('label');
text.forEach(label =>{
label.innerHTML = label.textContent.split('').map((text, wave) =>
`<span style="transition-delay: ${wave * 50}ms">${text}</span>`).join('');
});
</script>
</body>
</html>
CSS Code
The second file is a CSS file that name is style.css.
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.wave{
position: absolute;
top: 50%;
left: 50%;
width: 100%;
text-align: center;
transform: translate(-50%, -50%);
}
label{
font-size: 50px;
font-weight: 500;
color: silver;
cursor: pointer;
}
label span{
display: inline-block;
font-size: 50px;
font-weight: 500;
transition: 0.3s cubic-bezier(0.68,-0.55,0.265,1.55);
}
label:hover span{
color: #27ae60;
transform: translateY(-30px);
}
Here is the first part of Text Animations: Text Animations Part 01
0 Comments