How to Create a Typing Animation in CSS [Step-By-Step Guide]

CSS animations are an easy way to add extra delight moments for your website visitors. Even a quick animation effect can make the difference between a plain static web page and an experience that visitors will remember.

In this post, we’ll show you how to achieve one kind of CSS animation effect, a text-typing animation. This effect will make your onscreen text appear as if it’s being typed out with a typewriter or a word processor.

This effect works well for business sites, freelancer or personal websites, loading animations, and many other uses. Best of all, there’s no JavaScript programming needed. So, let’s get started.

How to Create a Typing Animation in CSS

To give the effect of typed text, essentially what we’re doing is creating a line of text, hiding it, then revealing it in a stepwise manner to give the illusion that it’s being typed. Here’s how to do it, starting from scratch.

Create the text in the document.

To start, let’s write the HTML that we’ll be animating. We’ll make a container div with class container that holds the text element. Inside the container, we’ll place a paragraph. Give this paragraph the class typed and add whatever text content you want.

We’re using a p element for this example, but you could use any element that holds text, like an h1, as well.

Animate the text to appear typed.

Next, we’ll use CSS animation to actually add the typing effect.

In your CSS, set the container div as an inline-block with the display property. I’ve also added a couple of other properties to style the text inside the div.

Setting display to inline-block makes it so that the width of the container div is set by the width of the paragraph text inside it.

Then, we’ll style our typed element with some important properties:

• overflow: hidden ensures the text isn’t visible past the edge of the element.
• white-space: nowrap keeps the text on one line.
• width: 0 hides the text at the start of the animation. The animation will change the paragraph’s width to reveal the text.

Here’s what the CSS looks like so far:

Now for the fun part: adding the animation. Create a @keyframes rule in your CSS as follows:

This rule changes the width of our paragraph element from 0 (i.e., invisible) to 100% the width of its parent element.

Next, we’ll add some extra CSS properties to our .typed class:

• animation: typing assigns the @keyframes rule we made to the .typed class.
• animation-duration: 1.5s makes the animation last 1.5 seconds.
• animation-timing-function: steps(30, end) makes the animation play in a stepwise manner, instead of smoothly. This is important because it creates the “typed” effect. 30 is the number of steps the animation takes, and these steps are spread evenly until the end of the animation.
• animation-fill-mode: forwards ensures that, after the animation is complete, the paragraph element stays at 100% width. Otherwise, the width would reset to 0.

Here’s what the CSS looks like so far:

We now have enough to see our animation in action. Here’s what the result looks like from the code we’ve written:

See the Pen typing animation: CSS full effect, no cursor by HubSpot (@hubspot) on CodePen.

Depending on the length of your text, you may need to increase or decrease the duration and number of steps of the animation to make it look how you want it to.

Add a cursor.

Our animation looks pretty good so far, but we can make it even better by adding a “cursor” to the effect, to really convey that the text is being typed out.

Adding a cursor is simple: We’ll use the right-side border of our paragraph element, which moves as the width of the paragraph element expands. Simply add border-right: 2px solid to your .typed CSS block, like so:

See the Pen typing animation: CSS full effect, no cursor blink by HubSpot (@hubspot) on CodePen.

You can adjust the border width and color to your liking.

Make the cursor blink.

To add a blinking effect to the cursor, we need to create a second @keyframes rule called blinking, which starts the border color as transparent, then changes it to black, then back to transparent.

We’ll apply this @keyframes rule to our .typed CSS block. To make things cleaner, I’ll use CSS animation shorthand for both the blinking and typing animations. I’ll also set the duration of blinking to one second and make it loop infinitely.

See the Pen typing animation: CSS full effect, cursor blink by HubSpot (@hubspot) on CodePen.

Center the text.

Lastly, let’s add some extra flair by centering the animation. I’m going to take the code we have so far and make some minor tweaks to the container:

• I’ll change the container’s display from inline-block to grid.
• I’ll add the declaration place-items: center for the container.
• I’ll also set the width of the container to 350px.

Here’s what we end up with:

See the Pen typing animation: CSS full effect, centered by HubSpot (@hubspot) on CodePen.

Pretty cool, right?

Add CSS typing effects to delight your users.

While it’s not something you’ll want to use on every line of text on your site, a simple CSS typing effect can engage visitors in an otherwise plain piece of copy. And though typewriters may not be at the forefront of technology these days, they’ll always evoke a cool sense of nostalgia.

So, give the examples above a try. A typing effect like this is relatively easy to implement, but it tells visitors that your website, and therefore your business, cares about the details.