Hello readers, today in this blog you’ll learn how to create Typing text Animation using pure HTML & CSS only. This program is for beginners who really want to learn new stuff using HTML & Css. Previously, I have shared an Animated Text Background with CSS Stroke, Now it’s time to create a Typewriter Animation effect using HTML & CSS.
Generally, A Typing Animation CSS is a simple typing effect with a blinking cursor. To achieve the typewriter effect, the width property of text is being animated from 0% to 100%. We have shown you a typing animation effect using pure CSS, which can give you an elegant look to your text & your whole website
As you can see in the above images, there is text showing a typing effect with a blinking cursor to make your website very cool and awesome. There are numerous ways to create animation, one of which is the Typing Animation effect to your text.
If you’re having difficulty in understanding what is written in this blog. You can also watch the full video just scroll down.
I believe you like this Typing Animation CSS. You can also use this Typewriter typing animation CSS text on your website or any project you want. And you can take this Typing Animation CSS to the next level with your creativity. Also I want you all to comment below if you have any question in your mind. Let’s move to the next step.
If you like the Typing Text Animation and want to get codes of this, you just need to scroll down.
To create this small task (Typing Animation CSS). You need to create two files. The two files are index.html and another one is a style.css file. Remember when you create an HTML file don’t forget to add a .html extension on HTML file and .css extension to your style file.
Now, create a Hypertext Markup Language(HTML) with the name of index.html and paste the below codes in your HTML file. Remember you’ve to create a file with .html extension
Animated Text | Multiwebpress
I'm a
- Youtuber
- Developer
- Coder
- Freelancer
Next, create a Cascading Style Sheet(CSS) with the name of style.css and paste the below codes in your HTML file. Remember you’ve to create a file with .css extension
*{
padding: 0; margin: 0;
box-sizing: border-box;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.wrapper{
display: flex;
border: 5px solid black;
padding: 25px;
}
.wrapper .text{
color: #000;
font-size: 60px;
font-weight: 400;
}
.wrapper .run-text{
margin-left: 15px;
height:90px;
line-height: 90px;
overflow:hidden
}
.run-text li{
list-style: none;
color: orange;
font-size: 60px;
font-weight: 400;
position:relative;
top:0;
animation: slide 12s steps(4) infinite;
}
@keyframes slide{
100%{
top:-360px;
}
}
.run-text li span{
position: relative;
max-resolution: 5px 0;
line-height: 90px;
}
.run-text li span::after{
content:"";
position: absolute;
left: 0;
height: 100%;
width: 100%;
background: #fff;
border-left: 3px solid black;
animation: typing 3s steps(12) infinite;
}
@keyframes typing{
40%, 60%{
left: calc(100% + 30px);
}
100%{
left: 0;
}
}
Well after creating these two files & pasting codes, now run the files in your browser. You can run to any browser you have on your computer. (Google Chrome, Firefox, Internet explorer etc.)
That’s all, now you’ve successfully created a Typing Animation Text using HTML & CSS.
If your code does have any bugs/errors/ or you’re facing any problems, then please comment down below or contact us from the contact us page.
Hope you enjoyed reading and watching the video. Please do like and subscribe to my youtube channel & follow me on instagram.
Thanks in Advance!