How to create typing effects using CSS

You don't need JavaScript to create the classic typewriter effect. CSS's step() function will help you create typography effects easily.

What is the typewriter effect?

The typewriter effect is an animation technique for text that simulates the process of content being displayed gradually, mimicking the act of typing as it unfolds before the viewer's eyes. The effect is reminiscent of old-fashioned typewriters, early computer terminals, or Command Line Interface (CLI).

The gradual emergence of text adds an element of suspense and intrigue, encouraging the audience to pay attention to the message being conveyed.

How the steps() function works in CSS

The step() function is a common function used in CSS animations. It makes the animation look like it's progressing in separate steps instead of a smooth transition.

step() is a function that determines the animation time with two parameters. The first parameter represents the number of steps you want your animation to take. The second parameter determines the behavior of each step. The syntax of the step() function is as follows:

animation-timing-function: steps(n, direction)

In the code block above, the step() function has two parameters: n and direction . The direction parameter can be start or end .

Setting direction to set ensures that the first step is completed as soon as the animation begins. Meanwhile, setting direction to end will run the last step when the animation ends. To illustrate the importance of the step() function , consider the following HTML code:

The code block above defines a container div with child divs. If you want the child div to glide across the screen, you use a CSS animation like this:

.container { background-color: blue; } div:not(.container) { background-color: red; width: 88px; height: 88px; animation: movebox 4s infinite; } @keyframes movebox { 100% { transform: translateX(100vw); } }

The code block above uses the @keyframes rule to determine the movebox named animation. This animation is then applied to the child div, causing it to move smoothly across the screen in an endless loop.

If you don't like smooth animations and want to achieve a "jumpy" effect, you can use the step() function like this:

div:not(.container){ background-color: red; width: 88px; height: 88px; animation: movebox 4s infinite; animation-timing-function: steps(10, end); }

As you can see in the GIF below, combining the step() function with the parameter value 10 will animate the child div in steps instead of a smooth animation. The higher the step count, the less choppy your animation will be.

In the above example, direction parameter is provided. However, if you omit direction, the browser will use end as the default value for direction .

Create a typewriter effect

Now that you understand how the step() function works , it's time to put everything you've learned into practice. Create a new folder and give it an appropriate name. In that folder, add the index.htm file for markup and the style.css file for styling.

In the index.htm file , add the following boilerplate code:

 Document Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, tempore! 

The code block above defines the markup for a simple HTML web page. There is a container div containing another div with some dummy text.

Create effects for text

Open the style.css file and set the width of the container div to the width of the content inside it.

.container{ width: fit-content; }

Next, using the @keyframes rule , define the animation that controls how it progresses over time. Set width to "0%" at 0% . At 100% , set the width to "100%" like this:

@keyframes type-text { 0% { width: 0%; } 100% { width: 100%; } }

Next, select the element named class text and set its overflow property to hidden . Doing so will ensure that the text remains hidden as long as the typing effect has not started. Having done that, make sure the text stays on one line by setting the whitespace property to nowrap . Give the text class a monospace font and add a green vertical border to the right of the text.

This border will create the appearance of a cursor. Set the appropriate font size and animation properties to the text type. Finally, add the step() function to the animation-timing-function .

.text { overflow: hidden; white-space: nowrap; font-family: "Courier New", Courier, monospace; border-right: solid 10px green; font-size: 23px; animation: type-text forwards 4s; animation-timing-function: steps(40); }

When you run the code in the browser, you will see:

If you want a longer typing effect, you can adjust the animation duration and number of steps specified in the step() function.

Make the cursor animate

The typewriter effect is almost complete, but one feature is still missing: the flashing cursor. Recall that in the last block of code, the right border was placed on the text to be used as a cursor. You can also add animation to this cursor using the @keyframes rule .

@keyframes cursor-blink { 0% { border-color: transparent; } 100% { border-color: green; } }

After defining the custom animation, add the animation name to the animation properties on the text layer and set the duration to 0.6 seconds.

.text{ /* Other style rules*/ animation: type-text forwards 4s, cursor-blink .6s infinite; }

Now when you run the code, you will see:

It's done! Wishing you success!

Jessica Tanner

Update 16 October 2023