How to Create Typing Animation Effect with CSS

🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (178K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

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.

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Spring Boot + RabbitMQ Course - The Practical Guide

Java Guides

Search This Blog