Typewriter CSS text Animation

Nowadays, we see animated typing text on the homepages of many websites. Animation on the home page makes it more dynamic and increases the engagement of the users. You can create typewriting text animations with a lot of online plugins. We will not go so deep, we will make a beautiful typing text animation using only HTML CSS.

Typing Text Effect is Easy to create:

I hope you watched the video and understood how this CSS animation example was created. The typewriter CSS text animation is to reveal the text one letter at a time like it was being typed in front of your eyes. If you want to increase user engagement on your website, you can include this type of css text effect. This type of animated text is easy to create. You don't need to know the coding of Javascript for this. This text effect can be created with some basic CSS elements.

Project Folder for Typing Text Animation:

We have created a folder with typewriter text. Inside the folder, we have a file called index.html, an example of an HTML document. The style.css file is the project's stylesheet.

HTML Part:

We took a random text and put it inside an h2 tag. The number of letters in the text needs to be counted after you take the text. You need to include the gaps between the words as well.

CSS Part:

First, we have eliminated the default margin and padding of the project. After that, we aligned the text in the middle of the viewport using the CSS flexbox property. We used a background image for the project and a red-type overlay effect. The typewriter animation is going to reveal our text element by changing its width from 0 to 750px and by using the CSS steps() function. You have to measure the width of the text using inspect element of the browser. In the steps function, we have to put the number 21, as the total letter count of our text is 21 including the gaps. Here the animation-iteration count will be infinite because we want our animation to happen an infinite number of times. The animation-direction property will be 'alternate' in our project.

You May Also Like: