Introduction

Typing effects can add a dynamic touch to your website, making it more engaging and interactive. If you've seen the typing animation in ChatGPT and wondered how to achieve a similar effect, this blog will guide you through creating it using only CSS.

Understanding the Typing Effect

A typing effect simulates text appearing letter by letter, similar to how a person types. This can be achieved using CSS animations without the need for JavaScript.

The Code Implementation

Below is a simple HTML and CSS implementation of a ChatGPT-like typing effect.

Step 1: HTML Structure

Create a simple HTML file with a container for the typing effect.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Typing Effect</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="typing-container">
        <span class="typing-text">Typing effect like ChatGPT...</span>
    </div>
</body>
</html>

Step 2: Adding CSS for the Typing Effect

.typing-container {
    font-family: monospace;
    font-size: 24px;
    white-space: nowrap;
    overflow: hidden;
    border-right: 2px solid black; /* Cursor effect */
    width: fit-content;
}

.typing-text {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid black;
    animation: typing 3s steps(20, end) forwards, blinkCursor 0.6s infinite;
}

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blinkCursor {
    50% { border-color: transparent; }
}

Explanation of the CSS

.typing-container holds the text and ensures it stays within its width.
.typing-text applies the typing effect by progressively revealing text.
@keyframes typing: Expands the width from 0 to 100% over time.
@keyframes blinkCursor: Simulates the blinking cursor effect.
steps(20, end): Controls the typing speed by determining the number of steps.

Conclusion

With just CSS, you can create a typing effect similar to ChatGPT. This is a simple yet effective way to enhance user interaction on your website. If you want more advanced effects, you can integrate JavaScript for dynamic text changes.

Submitted By Vibhuti Singh
Category jquery
Created On 10-Feb-2025