Hello developers, today in this blog, you will learn to create a Text Animation using HTML & CSS.
The text animation is the process of creating moving letters, words or the paragraph. The text animation types a letter or a character one by one. These text animations may be used for video introduction, transitions, short announcements, promos, and even quotes. You can adjust the letter-spacing based on the font family and font size being used in your webpage. This text animation can make your website eye-popping.
In this blog (Text Animation), there are two types of text that are, one is a static text which has no animation that is, this text is kept constant and, it will not get change and the other is a dynamic text which has an animation which changes or moves dynamically. In this text animation, we have added four different texts to this animation which will change dynamically.
The source code of this Text Animation is given below, if you want the source code of this program, you can copy it. You can use this Text Animation code with your creativity and can take this project to the next level.
Text Animation [Source Code]
To make this website (Text Animation), you need to create two files: an HTML file & a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
@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: #12192c;
}
.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: #E44D26;
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: 90px;
}
.dynamic-txts li span::after{
content: "";
position: absolute;
left: 0;
height: 100%;
width: 100%;
background: #12192c;
border-left: 2px solid #E44D26;
animation: typing 3s steps(25) infinite;
}
.credit a{
text-decoration: none;
color: #fff;
}
.credit {
text-align: center;
color: #fff;
padding-top: 250px;
}
@keyframes typing {
40%, 60%{
left: calc(100% + 30px);
}
100%{
left: 0;
}
}
Thank you for reading our blog. If you face any problem in creating this Text Animation using HTML & CSS, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team