WittCode💻

How to Create Typing Effect using CSS

By

Learn how to create a typing effect using HTML and CSS. Specifically, we will use CSS animations and keyframes.

Table of Contents 📖

How the Typing Effect is Created

To create the CSS typing effect, we increment the width of an element from 0% to 100% and style the element's border to mimick a blinking cursor. This is how the animation in the GIF below was made.

Image

HTML Setup

To begin, lets set up the HTML structure.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>My chrome extension WittCepter is</h1>
  <div style="display: inline-block">
    <h2 class="typing">Great at analyzing browser traffic</h2>
  </div>
</body>
</html>

The class typing is used to create the typing effect. We also wrap it with an inline-block div so that the div wraps the text in the h1 tag. This will prevent our cursor from moving across the entire width of the page.

Create the Blinking Cursor

First lets create the blinking cursor. We will use a global CSS variable for our cursor color.

:root {
  --cursor-color: black;
}

Now lets make our cursor the right border of the h1 tag.

.typing {
  border-right: 1px solid var(--cursor-color);
}

Now lets add a blinking animation by using the CSS animation property.

animation: 
  blinking 1s steps(1, end) infinite;
  • Create an animation using the shorthand animation property.
  • Set the name to blinking using the animation-name property.
  • Make the animation last 1 second using the animation-duration property.
  • Set the animation-timing-function property to steps(1, end). This property specifies the time an animation takes to go from one set of CSS styles to another. Setting it to steps(1, end) means the function will iterate once and the animation change will occur at the end of the interval.
  • Set the animation-iteration-count property to infinite. This tells the browser to repeat the animation infinitely.

Now lets use the @keyframes rule to bring this animation to life.

@keyframes blinking {
  0% { border-color: transparent }
  50% { border-color: var(--cursor-color); }
  100% { border-color: transparent }
}

The @keyframes rule controls the steps of a CSS animation. Here, we are saying that at the start and end of the animation, set the border color to be transparent. Then, at the middle of the animation, set the border color to be black. This makes the border look like a blinking cursor.

Create the Typing Animation

Now lets create the typing animation. We will call this one typing. Add it just after the blinking animation.

animation: 
  blinking 1s steps(1, end) infinite,
  typing 4s steps(40, end);
  • Call the animation typing using the animation-name property.
  • Set the animation duration to 4 seconds using the animation-duration property.
  • Set the animation-timing-function property to steps(40, end). This means the function will iterate 40 times and the animation change will occur at the end of the interval.

Now lets create a @keyframes rule for this animation.

@keyframes typing {
  0% { width: 0 }
  100% { width: 100% }
}

Now, at the beginning of the animation the width of the h1 tag will be 0. Then, at the end of the of the animation the width of the h1 tag will be 100%. This will make it so the right border expands to the right with the text as it appears.

Setting Some Styles

Now that we have our animations set up, we need to set some styles. First, we want the text to be invisible initially. We can do this by setting the overflow property to hidden.

overflow: hidden;

This works as the width of the h1 tag increments from 0 to 100% in the animation. Now we should set the white-space to nowrap.

white-space: nowrap;

This is so the text will continue on the same line until a
tag is encountered. This is all it takes to create the typing animation. You can improve it by altering other properties such as letter-spacing, word-spacing, or even display.