← All elements
<p class="tw">Pure CSS is fun.</p>About this animation
Text typed out letter by letter by animating width with steps(), plus a blinking caret from a border.
How it works
The text is on one line with overflow hidden and a width equal to its character count in ch units. A keyframe animates the width from zero to full using steps(15), so it grows one letter at a time instead of smoothly. The caret is a right border that blinks with a second step-end animation.
Ways to customise it
- Change 15ch and steps(15) together when you change the text length.
- Edit the animation duration to type faster or slower.
- Change the border colour to restyle the caret.
Good to know
It needs a monospace font so each step equals one character. Screen readers read the full text immediately. The effect stops under prefers-reduced-motion.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.