Text Typing Animation in CSS

This article will show how to create text typing animation in HTML and CSS. This animation effect is helpful for creating attractive home page texts.

Step by Step guide to creating typewriter animation

1. Create a <div> tag and set the classname “container”, and Inside it, create a <p> tag with some text and set the classname “text”. Make sure the width of the <p> element is only as long as the text itself.
2. Then in CSS, select the “container” using the class selector and set the “display” property to “inline-block”
3. Select “text” using the class selector and set the “font-size”, “letter-spacing”, and “font-family” as you wish. Set the “border-right” property to “5px solid” for the cursor. Then set the “white-space” property to “nowrap”, “overflow” property to “hidden” and “animation” property to “typing 2s steps(18), cursor .4s step-end infinite alternate” for animation work. Here, we set 18 steps because we have 18 characters in the <p> text. You should mention the correct amount of characters in your text including whitespace inside the steps() function.
4. Then animate the “cursor” for blinking using keyframes like the below code.
5. Animate the “typing” for typing effect using keyframes.
6. See the below output, the text typing animation effect works successfully.

Live Preview:

See the Pen
Text Typing Animation by Wonderdevelop (@wonderdevelop)
on CodePen.

You can also altogether remove the steps() part to get a different style, as you can only pass the “animation” property to “typing 2s, cursor .4s step-end infinite alternate”. See the below output, our text typing animation works differently.

See the Pen
TypeWriting Text by Wonderdevelop (@wonderdevelop)
on CodePen.