How to create text animation using CSS
Posted on March 12, 2021, at 8:00 PM [IST], created by Admin, Website: codewithbishal.com
Animated Typing effect :
Animated Typing effect :
What is a text animation using CSS?
=> Our awesome, text animation using CSS gives visitors an attractive, responsive, text animation using CSS. You can also add these to your website or to your portfolio and can create a great impression in front of your visitors.
Animated typing using CSS
How can I use this text animation using CSS?
=> You can easily copy the code or can download the code from our website and can simply paste it anywhere to get the text animation using CSS.
Do I need to know how to code?
=> No, you don't need to know how to code you can simply copy code from here and paste it wherever you want your text animation using CSS. Also, you can try it on our website using the "TRY IT NOW" option or can download the code using the "Download" button below.
Animated typing using CSS
Is it safe to use the text animation using CSS in HTML?
=> Yes, it's completely safe to use the text animation using CSS.
What are the advantages of the text animation using CSS?
=> Text animation using CSS is a very good way for to design your website or your portfolio.
Animated typing using CSS
How can I download the source code of the text animation using CSS?
=> Scroll the page to the bottom there you will find our download button to download the code.
Overview of the Blog :
=> In this blog, you can learn, how to make a text animation using CSS using HTML and CSS By Code With Bishal. Just Copy The Code From Here And Paste It Into Your Website or portfolio. To Preview scroll the page to the beginning. If you are having any problem viewing the code just refresh the page. The text animation using CSS is a lightweight and easy-to-use HTML and CSS code that creates a text animation using CSS for you. In this blog, there are fifth sections on the webpage, in the first section, you can get a preview of the blog, in the second section there are few FAQs and an overview of the blog, in the third section there are few more coding blogs you might like, in the fourth section you can Try our text animation using CSS using the "TRY IT NOW" button, after that, you can copy the code and paste it [that's the fifth section] and from the last section You can download the source code.
You might like this :
Step by step guide of creating a text animation using CSS:
So this time I have something interesting you can put this where your clients or visitors will land or landing page and this will show a nice animation to your viewers. The first step is to add the broiler plate of HTML, you can add this from below. (if you want to create text animation using CSS then click here.
Step 1
=> Add the Broiler plate of HTML
<!DOCTYPE html>
<html>
<head>
<title>text animation using CSS - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com
-->
<body>
</body>
</html>
After adding the broiler plate of HTML add the texts you want to animate inside a unordered list (UL)
<ul class="dynamic-text">
<li><span>Front End Dev</span></li>
<li><span>Back End Dev</span></li>
<li><span>Full Stack Dev</span></li>
<li><span>Freelancer</span></li>
</ul>
Then add the styling
Now, let's add the CSS or style to our HTML file and this will do the styling of our text animation. So our second step is to add the CSS file, you can copy the code from below
Step 2)
=> Add CSS (External or Internal)
If you are using External CSS then create a file
style.css
And add code :
<link rel="stylesheet" href="style.css">
If you want to use Internal CSS than add
<style> </style>
tag Between
<head> </head>
then add the below CSS code between style tag or inside style.css
to reset margin, padding and to set font-family.
@import url('https://fonts.googleapis.com/css2?family=Akaya+Telivigala&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Akaya Telivigala', sans-serif;
}
Now, add style to the movie card
.dynamic-text{
height: 90px;
overflow: hidden;
}
.dynamic-text li{
list-style: none;
color: #105be7;
font-size: 60px;
font-weight: 500;
position: relative;
top: 0;
animation: slide 12s steps(4) infinite;
}
.dynamic-text li span{
position: relative;
margin: 5px 0;
line-height: 90px;
}
.dynamic-text li span::after{
content: "";
position: absolute;
left: 0;
height: 100%;
width: 100%;
background: #fff;
border-left: 2px solid #1475f3;
animation: typing 3s steps(10) infinite;
}
We have successfully added style to our animated text.
Now, add animation to the text
@keyframes typing {
40%, 50%{
left: 100%;
}
100%{
left: 0;
}
}
@keyframes slide {
100%{
top: -360px;
}
}
We have successfully added animation to our animated text.
OR copy the code from below
Step 1) Add your HTML Code -
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Movie Tickets - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com -->
<body>
<ul class="dynamic-text">
<li><span>Front End Dev</span></li>
<li><span>Back End Dev</span></li>
<li><span>Full Stack Dev</span></li>
<li><span>Freelancer</span></li>
</ul>
</body>
</html>
Step 2) Add your CSS Code -
CSS Code
<style>
@import url('https://fonts.googleapis.com/css2?family=Akaya+Telivigala&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Akaya Telivigala', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
background: #fff;
}
.dynamic-text{
height: 90px;
overflow: hidden;
}
.dynamic-text li{
list-style: none;
color: #105be7;
font-size: 60px;
font-weight: 500;
position: relative;
top: 0;
animation: slide 12s steps(4) infinite;
}
@keyframes slide {
100%{
top: -360px;
}
}
.dynamic-text li span{
position: relative;
margin: 5px 0;
line-height: 90px;
}
.dynamic-text li span::after{
content: "";
position: absolute;
left: 0;
height: 100%;
width: 100%;
background: #fff;
border-left: 2px solid #1475f3;
animation: typing 3s steps(10) infinite;
}
@keyframes typing {
40%, 50%{
left: 100%;
}
100%{
left: 0;
}
}
</style>
Leave a Comment:
<!DOCTYPE html>
<html>
<head>
<title>text animation using CSS - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com
-->
<body>
</body>
</html>
<ul class="dynamic-text">
<li><span>Front End Dev</span></li>
<li><span>Back End Dev</span></li>
<li><span>Full Stack Dev</span></li>
<li><span>Freelancer</span></li>
</ul>
=> Add CSS (External or Internal)
If you are using External CSS then create a file
style.css
<link rel="stylesheet" href="style.css"><style> </style><head> </head>style.css
@import url('https://fonts.googleapis.com/css2?family=Akaya+Telivigala&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Akaya Telivigala', sans-serif;
}
.dynamic-text{
height: 90px;
overflow: hidden;
}
.dynamic-text li{
list-style: none;
color: #105be7;
font-size: 60px;
font-weight: 500;
position: relative;
top: 0;
animation: slide 12s steps(4) infinite;
}
.dynamic-text li span{
position: relative;
margin: 5px 0;
line-height: 90px;
}
.dynamic-text li span::after{
content: "";
position: absolute;
left: 0;
height: 100%;
width: 100%;
background: #fff;
border-left: 2px solid #1475f3;
animation: typing 3s steps(10) infinite;
}
@keyframes typing {
40%, 50%{
left: 100%;
}
100%{
left: 0;
}
}
@keyframes slide {
100%{
top: -360px;
}
}
OR copy the code from below
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Movie Tickets - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com -->
<body>
<ul class="dynamic-text">
<li><span>Front End Dev</span></li>
<li><span>Back End Dev</span></li>
<li><span>Full Stack Dev</span></li>
<li><span>Freelancer</span></li>
</ul>
</body>
</html>
CSS Code
<style>
@import url('https://fonts.googleapis.com/css2?family=Akaya+Telivigala&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Akaya Telivigala', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
background: #fff;
}
.dynamic-text{
height: 90px;
overflow: hidden;
}
.dynamic-text li{
list-style: none;
color: #105be7;
font-size: 60px;
font-weight: 500;
position: relative;
top: 0;
animation: slide 12s steps(4) infinite;
}
@keyframes slide {
100%{
top: -360px;
}
}
.dynamic-text li span{
position: relative;
margin: 5px 0;
line-height: 90px;
}
.dynamic-text li span::after{
content: "";
position: absolute;
left: 0;
height: 100%;
width: 100%;
background: #fff;
border-left: 2px solid #1475f3;
animation: typing 3s steps(10) infinite;
}
@keyframes typing {
40%, 50%{
left: 100%;
}
100%{
left: 0;
}
}
</style>