For a single line in a monospace font, CSS can do this on its own: animate the element's width from zero to the length of the text in ch units, use steps() with the same number so it grows one character at a time, and let a right border be the cursor. Copy the first block below. If your font isn't monospace, the text needs to wrap, or someone else will be editing the words, skip to the per-letter version.

The copy-paste version

<p class = "typing" > Ship it before the coffee cools. </p>

Enter fullscreen mode

Exit fullscreen mode

.typing { width : 32ch ; /* characters in the line, spaces included */ white-space : nowrap ; overflow : hidden ; font-family : ui-monospace , Menlo , Consolas , monospace ; border-right : 0.1em solid ; /* the cursor */ animation : typing 3.2s steps ( 32 ) , blink 0.75s step-end 6 ; } @keyframes typing { from { width : 0 } } @keyframes blink { 50 % { border-color : transparent } }

@media ( prefers-reduced-motion : reduce ) { .typing { animation : none ; } }

Enter fullscreen…