Hello Friends, in this blog, we will learn how to create a simple typing text animation using only HTML & CSS, or you can say Typewriter text animation. Earlier in this blog, I have shared a couple of text animation snippets with the help of jquery, but here in this blog, I am going to only CSS keyframes animation to create a nice-looking typing text animation. Apart from this, I have shared many CSS animation examples in my blog. Please make sure to check those as well.
Many websites use this kind of typing text animation to make the website look appealing. Suppose you Visit any portfolio templates in any famous marketplaces like ThemeForest, template monster, or creative market. You will see that the developers are using typing text animation in their templates. In general, this kind of animation is created by custom javascript or jquery or any jquery plugins like typed.js, typer, js, etc. Still, today we are using simple CSS animation to create this excellent animation.
In this text effect, the typing animation will occur to a specific width and reverse back to its original position. First of all, I have taken a random three-word text inside an h1 tag. in the CSS, I positioned the text in the middle with the help of the CSS flexbox. Give the body a background image of your choice so that the animation looks nice. You can use a random background or gradient color instead of the picture. After styling the h1 tag, I have set an animation property. For animating the letter one by one, I used CSS 'steps' animation timing function. In the sentence 'Typing Text Animation,' there are 21 steps, including the gaps between each word. When you put your text there, make sure to count the total letters, including the gap between them. I set the animation iteration count to 'infinite' and the animation direction to 'alternate' so that the animation can be played forwards first, then backward. In the end, I set the width in the keyframes animation from 0 to 800px. You also need to adjust the width so that the text doesn't overlap.
You may like this:
If you like this animation, then feel free to use it in your project. Download the code by clicking the button provided below.
Pure CSS Typing Text Animation [ Source Code ]
To do this project ( typewriter text animation ), first, you have to create two files. One of them is HTML, and the other is CSS. after creating the files, paste the code provided below in the respective file.
I hope you liked this snippet. If so, please share the blog and follow us in our social media profiles and stay connected with this blog. Thank you for stopping by.
Post a Comment
Please do not enter any spam link in the comment box.