DEV Community

Cover image for How to Create a Typing Animation Using Pure CSS (Step-by-Step Guide)
bala senthil
bala senthil

Posted on

How to Create a Typing Animation Using Pure CSS (Step-by-Step Guide)

#webdev #tutorial #css #frontend

Creating a Typing Animation Using CSS (Step-by-Step Guide)

Animations play a major role in modern web design. A small interactive effect can make a website feel more dynamic and engaging. One such popular effect is the typing animation, where text appears on the screen as if it is being typed in real time.

This effect is commonly used in portfolio websites, landing pages, and hero sections to capture user attention. The best part is that you can create this animation using pure HTML and CSS, without needing any JavaScript.

In this guide, we’ll learn how to build a simple and elegant typing animation using CSS.

Understanding the Typing Effect

A typing animation works by gradually revealing text from left to right. At the same time, a blinking cursor is displayed to simulate the look of someone typing on a keyboard.

To achieve this effect, we use:

  • CSS keyframe animations
  • The steps() timing function
  • A border cursor animation

These techniques allow us to create a smooth and realistic typing experience.

Step 1: Create the HTML Structure

<section class="d-flex justify-content-center">
        <h1 class="typing-text">Welcome to My Personal Website</h1>
</section>
Enter fullscreen mode Exit fullscreen mode

Step 2: Style the Text with CSS

Next, we apply some basic styles to prepare the text for animation.

.typing-text {
  font-family: monospace;
  font-size: 28px;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid black;
}
Enter fullscreen mode Exit fullscreen mode

Why these properties?

  • white-space: nowrap → Prevents the text from wrapping to another line
  • overflow: hidden → Hides the text until it is "typed"
  • border-right → Creates the typing cursor

Step 3: Create the Typing Animation

.typing-text {
  width: 0;
  animation: typing 5s steps(31) forwards;
}
Enter fullscreen mode Exit fullscreen mode 
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 31ch;
  }
}
Enter fullscreen mode Exit fullscreen mode

Explanation

  • steps(31) makes the animation move character by character.
  • 31ch represents the width of 31 characters.

This gives the effect of text appearing letter by letter.

Step 4: Add a Blinking Cursor

.typing-text {
  animation: typing 5s steps(31) forwards, blink 0.9s infinite;
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}
Enter fullscreen mode Exit fullscreen mode

This animation repeatedly hides and shows the cursor, creating a blinking effect.

Result

After combining everything, the text will:

  • Appear character by character
  • Display a blinking cursor
  • Create a realistic typing effect

This small animation can significantly improve the visual appeal of your website.

Check out more web development articles by clicking the link below.

Dev with Bala: How to Create a Typing Animation Using Pure CSS (Step-by-Step Guide)

Most Useful HTML Tags How to Create a Typing Animation Using Pure CSS (Step-by-Step Guide) Creating a Typi...

favicon devwithbala.blogspot.com

Github link:

GitHub logo Balasenthil / UI-Development

A clean and responsive login form created using HTML and CSS, featuring a modern UI design, smooth layout, and mobile-friendly responsiveness.

UI-Development

A clean and responsive login form created using HTML and CSS, featuring a modern UI design, smooth layout, and mobile-friendly responsiveness.


View on GitHub


Top comments (0)