Hey friends, today in this blog you'll learn how to create a Simple Text Typing Animation using only HTML & CSS or Typewriter Text Animation. Earlier I have shared a blog on Colorful Gradient Text Effect using HTML & CSS and now I'm going to create pure CSS text typing animation.
You may have seen this type of text animation on many portfolio sites or other sites. Generally, this animation is created using JavaScript or jQuery library, and the famous jQuery library for text animation is typed.js but now I'll tell you how you can create this text typing animation using only HTML & CSS.
In this text animation, there are two types of texts that mean one is a static text which has no animation, and the second one has animation and it changes dynamically. I have added four different texts to this animation and it's shown one by one with a typing animation which looks pretty cool and interesting.
You can copy the codes from the given boxes or download the code files from the given link but I recommend you download the source code files instead of copying codes. Click here to download code files.
You might like this:
Pure CSS Custom Radio Buttons
Colorful Gradient Text Animation
Copy Text to Clipboard JavaScript
CSS Text Glitch Animation Effect
HTML CODE:
<!DOCTYPE html>
<!-- Created By CodingNepal - www.codingnepalweb.com -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multiple Texts Typing Animation | CodingNepal</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>YouTuber</span></li>
<li><span>Designer</span></li>
<li><span>Developer</span></li>
<li><span>Freelancer</span></li>
</ul>
</div>
</body>
</html>
CSS CODE:
@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;
}
}
Visit CodingNepal for more awesome videos | blogs
https://www.codingnepalweb.com/
https://www.youtube.com/codingnepal
Top comments (1)
Great tutorial! I appreciate how you broke down each step, making it easy to follow. The explanation of form validation is especially helpful, as it ensures user inputs are correct before submission. I am a student of Best International Schools in Hyderabad. Would love to see more examples like this for other types of elements. Keep up the good work!