CSS Animation Example: Typewriter Effect

The "Typewriter Effect" is a nostalgic and highly engaging way to reveal a headline or key sentence, mimicking a person typing it out live.

Hello, welcome to my website!

This trick is entirely CSS-based! It relies on animating the width of the text container from 0 to 100%. Importantly, the text must be prevented from wrapping using white-space: nowrap and hidden when overflowing using overflow: hidden.

The magic ingredient is the steps() timing function. Instead of smoothly increasing the width, steps() chops the animation into discrete jumps. By setting the number of steps to roughly equal the number of characters in the string, it reveals one letter at a time.

We also run a secondary, infinite animation that toggles the border-color of the right border to simulate a blinking cursor.

Here is the code to create the Typewriter Effect.

<!doctype html>
<title>Example</title>
<style>
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: 'Courier New', Courier, monospace; /* Monospace is best for this */
    background-color: #f0f0f0;
}

.typewriter-container {
    display: inline-block;
}

.typewriter-text {
    overflow: hidden; /* Ensures the text isn't revealed until the animation */
    white-space: nowrap; /* Keeps the text on a single line */
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */
    letter-spacing: .15em; /* Adjust as needed */
    font-size: 2rem;
    font-weight: bold;
    color: #333;
    
    /* The typing cursor */
    border-right: .15em solid orange; 
    
    /* 
       1. typing: Animates width from 0 to 100% using steps() based on char count.
       2. blink-caret: Flashes the border on and off.
    */
    animation: 
        typing 3.5s steps(30, end),
        blink-caret .75s step-end infinite;
}

/* The typing effect */
@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

/* The typewriter cursor blink */
@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: orange; }
}

@media (prefers-reduced-motion: reduce) {
    .typewriter-text {
        animation: none; /* Disables both typing and blinking */
        width: 100%; /* Ensure text is fully visible immediately */
        border-right: none; /* Remove the cursor */
    }
}
</style>

<div class="typewriter-container">
    <div class="typewriter-text">Hello, welcome to my website!</div>
</div>

View Output

Accessibility Considerations

Text that forces a user to wait to read it can be frustrating, especially for users with cognitive or reading disabilities, or those who rely on screen readers. Furthermore, the blinking cursor can be a distraction for users with ADHD or vestibular issues.

prefers-reduced-motion is a CSS media feature used to detect if a user has enabled a setting on their device to minimize the amount of non-essential animation or motion. We handle this by disabling both animations and ensuring the width is set to 100% so the string is immediately visible in its entirety.

Here's what we used in our example:


@media (prefers-reduced-motion: reduce) {
    .typewriter-text {
        /* Kill both the typing width change and cursor blink */
        animation: none; 
        
        /* Ensure text is fully exposed */
        width: 100%; 
        
        /* Hide the cursor line */
        border-right: none; 
    }
}