Very Simple Typewriter Effect With Pure HTML CSS

Welcome to a tutorial on how to create a simple typewriter effect with pure HTML and CSS. Yes, you read that right. It is possible to create a typewriter effect using only CSS, not a single line of Javascript – Read on for the example!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

TLDR – QUICK SLIDES

DOWNLOAD & DEMO

Firstly, here is the download link to the example code as promised.

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

EXAMPLE CODE DOWNLOAD

Click here to download all the example source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

CSS TYPEWRITER DEMO

CSS TYPEWRITER EFFECT

All right, let us now get into the details of how the HTML CSS typewriter effect works.

PART 1) THE HTML

1-typewriter.html

<p id="typewriter"></p>

Yep… This is just a good old empty <p>.

PART 2) CSS TYPEWRITER ANIMATION

2-typewriter.css

/* (A) USE KEYFRAMES TO DEFINE TEXT */
@keyframes writer {
  0% { content: ""; }
  15% { content: "H"; }
  30% { content: "HE"; }
  45% { content: "HEL"; }
  60% { content: "HELL"; }
  80% { content: "HELLO"; }
  100% { content: "HELLO"; }
}
 
/* (B) ATTACH KEYFRAMES TO PARAGRAPH ::BEFORE */
#typewriter::before {
  /* (B1) REQUIRED - EMPTY CONTENT */
  content : "";
 
  /* (B2) KEYFRAMES | TIME | TIMING FUNCTION | LOOP */
  animation: writer 3s linear infinite;
}

(B1) The secret behind the typewriter effect is to attach content to the ::before pseudo-class.
(A) Then, create a set of @keyframes to “type” out the text you want.
(B2) Lastly, attach the keyframes animation to ::before.

PART 3) EXTRA CSS COSMETICS

2-typewriter.css

/* (C) COSMETICS - DOES NOT MATTER */
#typewriter {
  font-family: arial, sans-serif;
  font-size: 40px;
  padding: 0; margin: 0;
}
 
/* (D) OPTIONAL - CURSOR */
@keyframes blink {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
#typewriter::after {
  content: "|";
  animation: blink infinite alternate 0.4s;
}

Here are 2 small extras we can add to the typewriter effect.

(C) The content is literally text. We can still apply all the “usual” font weight, font family, text color, and text size.
(D) Using CSS animation in a different manner, we can create and attach a “blinking cursor” to ::after. Remove this entire section if you don’t need the cursor.

EXTRA BITS & LINKS

That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.

CSS TYPEWRITER IS NOT SO CLEVER

Yep, the CSS typewriter effect will work as long as the CSS animation of content is supported in the browser. But as you can see, it is a real pain to change the text. The entire @keyframes has to be updated, and you have to guesstimate the timing. Long story short, it is much easier with Javascript. Don’t need to panic, check out my other guide, link below.

COMPATIBILITY CHECKS

CSS Keyframes – CanIUse
CSS Animation – CanIUse

This example will work on all modern and not-so-modern browsers.

LINKS & REFERENCES

Javascript Typewriter Effect – Code Boxx
Example on CodePen – Pure CSS Typewriter

INFOGRAPHIC CHEAT SHEET

THE END

Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!