Create Amazing Typing Animation CSS Effects in 2026

You’re probably looking at a hero section, popup, or promo banner that feels flat. The copy is fine, the layout is clean, but the page still needs one small motion cue to pull the eye where you want it.

That’s where typing animation css earns its keep. A typewriter effect can make a headline feel active instead of static, add a little tension before a key value proposition appears, and give a Divi popup more personality without turning the page into a gadget demo.

Used well, it’s lightweight and practical. Used badly, it breaks on dynamic text, jitters on busy layouts, and becomes a maintenance chore the next time a client changes the headline. The trick isn’t just getting the animation to run. It’s choosing the version that holds up inside real Divi builds, WooCommerce content, and Divi Areas Pro popups.

Why a CSS Typing Animation Captivates Your Audience

A typed headline feels like someone is actively presenting the message. That changes the pacing of a page.

On a static hero, users scan. On a well-timed typewriter effect, they pause for a moment and follow the reveal. That tiny delay can help you land a product promise, announce an offer, or make a popup feel less abrupt.

Where it works especially well in Divi

Divi gives you several natural homes for this effect:

• Hero headlines where the first line needs more drama than a fade-in.
• Feature callouts that reveal a short promise one character at a time.
• Lead capture popups where motion softens the transition into an offer.
• WooCommerce promotions where the typed text highlights shipping, bundles, or urgency.

The reason this effect stays popular is simple. It’s expressive without needing a full animation library. A single line of text and a blinking cursor can do a lot of work.

Practical rule: Keep the message short and intentional. Typing works best when the line deserves attention.

What separates a demo from a production-ready effect

Most tutorials stop at a basic CSS snippet. That’s enough for a mockup. It’s not enough for client work.

Real projects force harder questions:

• What happens when the text changes?
• How do you handle multiple lines?
• Where should the CSS live in Divi?
• How do you avoid motion issues for sensitive users?
• What should you do in a popup where content is loaded conditionally?

Those trade-offs matter more than the effect itself. A battle-tested implementation keeps the animation sharp, editable, and easy to reuse across pages.

The Core CSS Typing Animation Explained

The classic typewriter effect is still the right starting point. It’s clean, easy to reason about, and works without JavaScript when the text is fixed.

According to HubSpot’s walkthrough of the pattern, the effect relies on the steps() timing function, typically using around 30 steps over 1.5 seconds, while animating width from 0% to 100% with display: inline-block, overflow: hidden, and white-space: nowrap to keep the reveal tight to the text. The cursor effect comes from a secondary blinking animation that toggles the border every second in a standard setup described in their guide: HubSpot’s CSS typing animation tutorial.

The basic HTML

Start with one short line.

<h2 class="typewriter">Built for Divi sites that need more attention.</h2>

Nothing fancy here. The animation lives in CSS.

The core CSS

.typewriter {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid #000;
  width: 0;
  margin: 0 auto;
  animation: typing 1.5s steps(30, end) forwards, blink 1s step-end infinite;
}

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

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

Every property has a job:

• display: inline-block makes the width animation hug the text instead of stretching like a block element.
• overflow: hidden masks the unrevealed characters.
• white-space: nowrap stops the line from wrapping mid-animation.
• border-right becomes the cursor.
• steps(30, end) breaks the motion into jumps instead of a smooth slide.

Why steps() matters

Without steps(), the width would glide from left to right. That looks like a wipe, not typing.

With steps(), the browser reveals text in discrete increments. If you know the character count, matching the step count to the text length usually gives the cleanest result.

.typewriter-short {
  animation: typing 1.5s steps(24, end) forwards, blink 1s step-end infinite;
}

That’s especially useful when you want a more precise reveal.

If the animation feels like it’s clipping letters or jumping oddly, the step count usually needs attention before anything else.

A cleaner cursor with a pseudo-element

You can also separate the cursor from the main border. That gives you more control over styling.

.typewriter {
  position: relative;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  animation: typing 1.5s steps(30, end) forwards;
}

.typewriter::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  background: #000;
  margin-left: 4px;
  vertical-align: bottom;
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  50% {
    background: transparent;
  }
}

This version is useful when the design already uses borders elsewhere and you don’t want the cursor tied to the element edge.

When to use this version

Use the pure CSS version when the text is fixed and short. It’s perfect for hero copy, static CTA lines, and feature blurbs that won’t change per user or product.

If you also like small interface motion details, the same mindset applies to loaders and progress UI. A good companion read is this guide to a captivating animated progress bar with HTML, CSS, and React, which shows the same principle of using focused animation instead of decorating everything at once.

Creating Animations with Multiple Lines and Pauses

Single-line demos are easy. Real projects rarely stop there.

Clients want a first phrase, then a pause, then a second phrase. Or they want a popup to type a short headline and then reveal a supporting line beneath it. That’s where pure CSS starts showing its limits.

For multiline typing, step calculations get messy fast. Alvaro Montoro notes that accurate steps() values become difficult with non-monospace fonts, and 30-50% of CSS-only solutions can fail in this scenario. He also shows that one advanced approach may require generating as many keyframe rules as there are letters, which makes long text impractical, especially beyond 100 characters: Montoro’s analysis of the CSS typewriter effect.

The reliable CSS pattern for multiple lines

Don’t force one element to do everything. Split each line into its own element and stagger them with delays.

<div class="type-sequence">
  <div class="line line-1">Launch faster with Divi.</div>
  <div class="line line-2">Convert better with smarter popups.</div>
</div>

.type-sequence .line {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  border-right: 2px solid #000;
}

.type-sequence .line-1 {
  animation: typing1 1.5s steps(24, end) forwards, blink 1s step-end infinite;
}

.type-sequence .line-2 {
  display: block;
  margin-top: 12px;
  animation: typing2 1.5s steps(35, end) forwards 2.2s, blink 1s step-end infinite 2.2s;
}

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

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

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

That gives you a first line, a pause, and a second line.

Where the pain starts

This is the part most snippets skip.

The more phrases you add, the more timing math you own. Every delay becomes dependent on the line before it. Every text edit can change the rhythm. If the font is proportional, width and character count don’t map neatly enough for a perfect illusion.

A few common failure points:

• Font mismatch creates awkward reveals because letters have different visual widths.
• Long text makes the animation feel slow or forces rushed timing.
• Shared cursor styling across multiple lines often looks wrong unless each line controls its own cursor state.
• Responsive wrapping can destroy the effect if a line wraps on smaller screens.

Pure CSS can sequence multiple lines, but it doesn’t scale gracefully when the content changes often.

A better way to handle pauses

Instead of trying to create one giant keyframe timeline, use separate animations and delays. It’s easier to debug and much easier to hand off.

Here’s a compact pattern for a pause before the next line appears:

.line-1 {
  animation: typing1 1.5s steps(24, end) forwards;
}

.line-2 {
  opacity: 0;
  animation:
    reveal 0s linear forwards 2s,
    typing2 1.5s steps(28, end) forwards 2s,
    blink 1s step-end infinite 2s;
}

@keyframes reveal {
  to { opacity: 1; }
}

That extra reveal animation prevents the second line from flashing before its turn.

What works in practice

For short, fixed headlines, CSS-only sequencing is fine.

For long text, variable content, or anything coming from a CMS field, move to a hybrid setup. The time you save on maintenance is worth it, and the final effect is usually cleaner.

Performance and Accessibility Best Practices

A typewriter effect only works if users can read it comfortably and the page still feels smooth. That’s the line between a stylish build and an annoying one.

MDN’s performance guidance is clear on the trade-off. Animating layout-affecting properties like width is less performant than animating transform or opacity, which browsers can often offload more efficiently. For the classic typing reveal, width is part of the visual trick, so the job becomes minimizing where and how you use it: MDN on CSS and JavaScript animation performance.

Respect reduced motion

This is not optional.

Some users explicitly tell the browser they want less motion. Your animation should listen.

@media (prefers-reduced-motion: reduce) {
  .typewriter,
  .type-sequence .line {
    animation: none;
    width: 100%;
    border-right: none;
  }

  .typewriter::after {
    animation: none;
    display: none;
  }
}

That gives users the finished text immediately, without the reveal or blinking cursor.

If accessibility is part of your normal Divi build checklist, Divi site owners should also review these broader website accessibility best practices so the animation fits into a more complete accessibility workflow.

Keep the effect small and local

Typing animation css works best when it’s scoped to one important message. Problems start when people apply it to multiple blocks on the same screen.

Use this rule set:

• Animate short text only so the reveal feels intentional.
• Avoid crowded sections where layout shifts or heavy modules are already competing for render time.
• Don’t stack motion effects on the same element. If text is typing, it doesn’t also need to bounce or slide.
• Test inside actual templates instead of isolated snippets.

Know the trade-off with width

You can animate transform for smoother motion in many UI patterns, but a classic typewriter reveal depends on masking text as width expands. That means you’re accepting some layout cost in exchange for the effect.

A small comparison helps.

Approach	Good for	Weak point
width animation	Classic character reveal	Can trigger layout work
transform animation	Smoother motion in many cases	Doesn’t produce the same typing illusion by itself
opacity animation	Gentle text entrance	No typewriter effect

On heavy Divi pages, a restrained animation often looks better than a technically perfect one that competes with everything else.

One more professional habit

Check the effect on mobile before you ship it. A line that looks clean on desktop may wrap or clip on a narrower viewport, especially inside popups and promotional bars.

The JavaScript Touch for Dynamic Content

Most pure CSS tutorials fall short here, assuming the text never changes.

In Divi projects, the text often does change. Product names, user-targeted offers, dynamic fields, and CMS-managed headlines don’t stay fixed long enough for hard-coded steps(24) values to remain accurate.

SitePoint highlights this as a major problem with the pattern. Pure CSS requires hard-coding the step count to the character count, which makes it a bad fit for dynamic content. Their write-up also notes that 70% of forks of popular typing animation CodePens involved manually adjusting the step count for new text: SitePoint’s CSS typewriter effect discussion.

The hybrid approach that scales

You don’t need a big library. You need a tiny helper that reads the text length and passes that value to CSS.

Start with this HTML:

<h2 class="typewriter dynamic-type">
  Free shipping on selected bundles
</h2>

Now use CSS variables:

.dynamic-type {
  --chars: 30;
  --duration: 1.5s;

  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  border-right: 2px solid #000;
  animation: typing var(--duration) steps(var(--chars), end) forwards,
             blink 1s step-end infinite;
}

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

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

Then add the JavaScript:

<script>
  document.querySelectorAll('.dynamic-type').forEach(function(el) {
    const text = el.textContent.trim();
    el.style.setProperty('--chars', text.length);
  });
</script>

That’s enough for many real-world uses.

Why this beats hard-coded CSS

Hard-coding ties your animation to one sentence. The first client edit breaks the illusion.

This helper gives you a better workflow:

• Editors can change the text without touching CSS.
• The step count updates automatically on page load.
• You still keep the visual logic in CSS, where it belongs.
• The JavaScript stays tiny, focused, and easy to maintain.

Using it with Divi dynamic content

This approach becomes especially useful when the typed string comes from Divi’s dynamic content tools. If you’re pulling in custom fields, post titles, or WooCommerce-related text, start with Divi’s built-in dynamic system and then let the small helper calculate the animation length. A good reference point is this walkthrough on Divi dynamic content.

A little JavaScript is often the honest solution. Not because CSS is weak, but because dynamic text changes the problem.

One caution

Character count isn’t the same as visual width in proportional fonts. This helper improves maintainability, but if the font has dramatic width differences between letters, you may still need to fine-tune duration or switch to a monospace display for a stricter typewriter look.

Implementing Typing Animations in Divi and Divi Areas Pro

The build matters as much as the code. A typing effect that lives in the wrong place becomes hard to reuse, hard to update, and easy to break.

In Divi, I usually choose the placement based on scope:

• Code Module for one-off experiments or page-specific effects.
• Divi Theme Options or Additional CSS for reusable styles across several pages.
• Child theme stylesheet when the animation becomes part of the site’s long-term design system.

CSS-driven animation remains a strong fit for Divi work because the underlying CSS animation model has had long-standing stable browser support, and CSS-based popup interactions in Divi-related workflows have been associated with 20-30% higher user interaction rates in e-commerce contexts according to the benchmark reference attached to the CSS-Tricks snippet source: CSS-Tricks typewriter effect snippet.

A clean Divi setup

For a standard hero section inside the Visual Builder:

1. Add a Text Module for the headline.
2. Open the module’s Advanced tab.
3. Add a CSS class like dynamic-type.
4. Place the CSS in Page Settings, Theme Options, or your child theme.
5. If the text is dynamic, add the short JavaScript snippet in a Code Module or your site-wide script area.

A simple module output looks like this:

<h1 class="dynamic-type">Smarter popups for WooCommerce stores</h1>

That gives you a reusable pattern across landing pages, headers, and promotional rows.

If you’re also shaping campaign pages in Divi, this guide on how to create a landing page in WordPress is useful because it pairs well with this effect. A typed hero headline is far more effective when the surrounding page structure is already built for one clear conversion goal.

Using the effect inside a popup

Popups are where this animation gets more interesting.

A typed headline inside a popup can soften the interruption and frame the offer. Instead of dropping a blunt message onto the screen, you guide attention. That works well for exit-intent offers, back-button promotions, and targeted WooCommerce notices.

For popup targeting and display logic, one practical option is Divimode, which provides tools for popups, fly-ins, content injection, and related display conditions inside Divi.

If you need the mechanics of loading content in a popup or injected area, this walkthrough on how to display content using Divi Areas Pro covers the display side that pairs naturally with the typing effect.

Popup markup and styling example

Inside a popup content area, keep it minimal:

<div class="promo-popup">
  <h3 class="dynamic-type">Wait. Your discount is still active.</h3>
  <p>Use the code shown below before leaving checkout.</p>
</div>

.promo-popup .dynamic-type {
  --duration: 1.5s;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  border-right: 2px solid #111;
  animation: typing var(--duration) steps(var(--chars), end) forwards,
             blink 1s step-end infinite;
}

Use a short sentence. Popups already ask for attention. The typing should sharpen the message, not delay it too long.

A visual walkthrough helps if you want to see the broader motion setup in action:

What to avoid in live Divi projects

Some mistakes show up repeatedly:

• Long promotional paragraphs animated as if they were headlines.
• Typing inside narrow columns where line wrapping ruins the reveal.
• Hard-coded step counts on content editors frequently change.
• Multiple typewriter modules on one viewport competing with one another.

Use the effect where it adds direction. Skip it where plain text already does the job.

Final Thoughts and Your Next Steps

Typing animation css still works because it solves a simple design problem. It tells visitors where to look first.

The dependable version is short, restrained, and built for the context around it. Use pure CSS for fixed headlines. Use a light JavaScript helper when the text is dynamic. Keep accessibility in place, test the effect inside actual Divi layouts, and treat popups as a focused use case rather than an excuse to animate everything.

Done well, this effect doesn’t just decorate a page. It improves pacing.

---

If you build with Divi regularly, Divimode is worth exploring for practical guidance on interactive layouts, popups, content injection, and the kinds of real-world behaviors that make small effects like typing animations more useful in production.