How to Create Typing Animation Effect with CSS

Introduction

Creating a typing animation effect in CSS can add a dynamic and engaging touch to your web page. This effect mimics the appearance of text being typed out in real-time, often used for headers or intros.

In this tutorial, you'll learn how to create a typing animation effect using CSS by combining keyframes and the border-right property to simulate a blinking cursor.

Problem Statement

Create a CSS code that:

Animates text to appear as if it's being typed out.
Adds a blinking cursor effect for a realistic typing experience.

Example:

Input: A paragraph element with the text "Typing Animation Example".
Output: The text appears letter by letter, followed by a blinking cursor.

Solution Steps

Use @keyframes for Typing Animation: Create keyframes to gradually reveal the text.
Simulate Blinking Cursor: Use the border-right property to create a blinking cursor effect.
Control Animation Timing: Use animation property to adjust the typing speed and cursor blink rate.

HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Typing Animation Example</title>
    <style>
        /* Step 1: Create typing effect */
        .typing-text {
            font-family: monospace;
            white-space: nowrap;
            overflow: hidden;
            border-right: 3px solid black; /* Simulate cursor */
            width: 0; /* Initial width is 0 */
            animation: typing 4s steps(30, end), blink-caret 0.75s step-end infinite;
        }

        /* Step 2: Define keyframes for typing */
        @keyframes typing {
            from { width: 0; }
            to { width: 100%; }
        }

        /* Step 3: Blinking cursor effect */
        @keyframes blink-caret {
            from { border-right-color: black; }
            to { border-right-color: transparent; }
        }

        /* Additional styling */
        .container {
            width: 400px;
            margin: 50px auto;
            font-size: 24px;
        }
    </style>
</head>
<body>

    <div class="container">
        <p class="typing-text">This is a typing animation example with CSS!</p>
        <p class="typing-text">This is a typing animation example with CSS!</p>
        <p class="typing-text">This is a typing animation example with CSS!</p>
    </div>

</body>
</html>

Output

You can play with the above HTML in Online HTML Editor and Compiler. Here is the output of the above HTML page.:

Explanation

Step 1: Use `@keyframes` to Simulate Typing

To animate the text being typed out, use the following CSS:

.typing-text {
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid black;
    width: 0;
    animation: typing 4s steps(30, end), blink-caret 0.75s step-end infinite;
}

Step 2: Define Keyframes for Typing

The @keyframes typing rule gradually increases the width of the text element from 0 to 100%:
```
@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}
```

Step 3: Simulate the Blinking Cursor

The @keyframes blink-caret creates a blinking cursor effect by alternating the border-right-color between black and transparent:
```
@keyframes blink-caret {
    from { border-right-color: black; }
    to { border-right-color: transparent; }
}
```

Conclusion

Creating a typing animation effect with CSS is easy using @keyframes for the typing effect and a blinking cursor. This engaging effect can be used in headers, intros, or anywhere you want to grab your audience's attention.

Java Guides

Search This Blog