A CSS typewriter effect is a cool visual effect that can make your website stand out. It gives the illusion that text is being typed out, one character at a time, as if by an old-fashioned typewriter. In this tutorial, we’ll show you how to create a CSS typewriter effect for your website.
Step 1: Create HTML Markup To create the typewriter effect, we first need to create the HTML markup. In this example, we’ll create a simple paragraph with some text. Here’s an example:
<p class="typewriter-text">This is some text that will be animated.</p>
Step 2: Add CSS Styling Next, we’ll add some CSS styling to create the typewriter effect. Here’s the CSS code:
.typewriter-text {
display: inline-block;
overflow: hidden; /* Ensures the content is not revealed until the animation */
border-right: .15em solid orange; /* The typewriter cursor */
white-space: nowrap; /* Keeps the content on a single line */
letter-spacing: .15em; /* Adjust as needed */
animation: typing 3.5s steps(30, end), blink-caret .75s step-end infinite;
}
/* The typing animation */
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
/* The typewriter cursor animation */
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: orange; }
}
Let’s break down what’s happening in the CSS code.
First, we set the display property to inline-block to ensure that the typewriter effect only affects the text inside the paragraph tag. We also set the overflow property to hidden to ensure that the content is not revealed until the animation starts.
Next, we add a border-right property to create the typewriter cursor effect. The border-right property creates a vertical line on the right side of the text, which looks like a blinking cursor.
We also set the white-space property to nowrap to ensure that the text stays on a single line. Finally, we set the letter-spacing property to .15em to create a small gap between each character.
In the @keyframes section, we define the two animations. The typing animation uses the from and to properties to create the effect of the text being typed out. The steps() function divides the animation into 30 steps, with the end keyword ensuring that the animation finishes with the full text displayed.
The blink-caret animation uses the from, to, and 50% properties to create the effect of the cursor blinking on and off.
Step 3: Add the Animation to the HTML Markup To add the animation to the HTML markup, we simply add the class name we created earlier to the paragraph tag, like this:
<p class="typewriter-text">This is some text that will be animated.</p>
Step 4: Adjust the Timing and Spacing You can adjust the timing and spacing of the typewriter effect by adjusting the animation-duration and letter-spacing properties. For example, if you want the animation to be slower, you can increase the animation-duration property. If you want more space between each character, you can increase the letter-spacing property.
That’s it! With just a few lines of CSS, you can create a cool typewriter effect for your website.